如何使用 JavaScript 以编程方式设置输入：焦点样式

Question

我正在用 JS 构建一个 UI 库，它可以在不依赖任何 CSS 样式表的情况下创建 UI 组件，从代码中进行风格化。到目前为止，除了为不同的控件状态设置样式（例如 input:focus one）之外，这已经很容易了。

我用来创建输入字段的代码：

function newInput()
{
    var ctr = docmuent.createElement("input");
    ctr.setAttribute("type","text");
    ctr.setAttribute("value", some-default-value);
    ctr.style.fontFamily = "sans-serif,helvetica,verdana";
    /* some font setup here, like color, bold etc... */
    ctr.style.width = "256px";
    ctr.style.height = "32px";
    return ctr;
}

为默认状态设置样式很容易。但是，我不确定如何为聚焦、禁用或不可编辑等状态设置样式。

如果我在项目中包含 CSS 样式表，那将很容易整理出来。但是我不能包含任何 CSS 文件，它必须是纯 JS。

有谁知道如何直接从 JS 代码中为输入字段状态（例如 input:focus）设置样式？

请不要使用 JQuery :-) 直接使用 JS。

提前致谢！

Answer 1

您需要向元素添加事件侦听器才能更改其样式。这是一个非常基本的例子。

var input = document.getElementById("something");
input.addEventListener("focus", function () {
  this.style.backgroundColor = "red";  
});

<input type="text" id="something" />

Answer 2

另一种选择是为页面构建样式表。

像这样的东西：

 var styles='input:focus {background-color:red}';

 var styleTag=document.createElement('style');
 if (styleTag.styleSheet)
     styleTag.styleSheet.cssText=styles;
 else 
     styleTag.appendChild(document.createTextNode(styles));

 document.getElementsByTagName('head')[0].appendChild(styleTag);

这样您就可以将 css 样式与脚本完全分离，从而更好地进行维护。

Answer 3

如果可能的话使用 CSS 变量

现在是 2022 年，对于这个问题有更简单的解决方案，而不是在可能永远不会被清理的地方添加事件侦听器。

相反，如果您可以控制 CSS，请执行以下操作：

.my-class {
  --focusHeight: 32px;
  --focusWidth: 256px;
}

.my-class:focus {
  height: var(--focusHeight);
  width: var(--focusWidth);
}

然后在 JavaScript 中就像使用setProperty更新变量一样简单：

const el = document.getElementById('elementId');
el.style.setProperty('--focusHeight', newFocusHeight);
el.style.setProperty('--focusWidth', newFocusWidth);