Question

我正在JS中构建一个UI库，它可以在不依赖任何CSS样式表的情况下创建UI组件，从代码中进行样式化。到目前为止，除了样式化不同的控制状态（例如输入：焦点一）之外，它非常简单。

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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 = "";
});

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

3 个答案: