js修改placeholder样式，使placeholder超出换行

一、修改 placeholder 样式的方式

css 通过 ::placeholder，如：

input::placeholder {
	font-size: 14px;
}

二、使用 js 增加 伪类样式 的方式

创建 style 文件，插入到 head 里

var style = document.createElement('style')
style.innerHTML = ".test::before{color:green}"
document.head.appendChild(style);

三、实例

• 以 vue 中 element-ui 的 input 组件 为例
• 该例中 .placeholder-wrap 需要再往下找到 .el-input__inner
• 设置换行：white-space: pre-wrap;

<el-input
  class="input-width range placeholder-wrap"
  v-model.trim="querDataForm.frequencyMax"
  placeholder="最大值 例如：5~30，单位赫兹(Hz)"
>el-input>

created () {
  // 获取屏幕尺寸，手动兼容 placeholder 换行问题
  const clientWidth = document.body.clientWidth
  const gap = 1499
  let style = document.createElement('style')
  // 小于这个临界值，placeholder 手动设置换行，并且整体内容上移 20%（优化视觉效果）
  style.innerHTML = clientWidth < gap
    ? `.placeholder-wrap .el-input__inner::placeholder {
      white-space: pre-wrap;
      text-align: center;
      transform: translateY(-20%);
    }`
    : `.placeholder-wrap .el-input__inner::placeholder {}`
  document.head.appendChild(style)
},