javascript - 如何设置输入:focus style programatically using 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" />