如何使用 JavaScript 以编程方式设置 input:focus 样式

Question

我正在用 JS 构建一个 UI 库，它可以在不依赖任何 CSS 样式表的情况下，创建 UI 组件，从代码中风格化。到目前为止，一切都非常简单，除了设置不同控件状态的样式（例如 input:focus 一个）。

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

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

首先，创建您的输入：

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

然后添加javascript下面的javascript:

const element = document.getElementById("myElementID");

// Add a box shadow on focus
element.addEventListener("focus", (e) => {
  e.target.style.boxShadow = "0 0 0 3px #006bff40";
});

// Remove the box shadow when the user doesn't focus anymore
element.addEventListener("blur", (e) => {
  e.target.style.boxShadow = "";
});

Answer 4

尽可能使用 CSS 变量

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

相反，如果您可以控制 CSS，只需在 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);

如何使用 JavaScript 以编程方式设置 input:focus 样式

How to set input:focus style programatically using JavaScript

javascript

css

stylesheet

onfocus

尽可能使用 CSS 变量