我正在用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。
先谢了!
6条答案
按热度按时间hgqdbh6s1#
你需要给元素添加一个事件监听器来改变它的样式,下面是一个非常基本的例子。
xiozqbni2#
另一种方法是为页面构建样式表。
大概是这样的
这样你就可以把css样式和脚本完全分离,从而得到更好的维护。
vof42yt13#
尽可能使用CSS变量
现在是2022年,对于这个问题,有比到处添加事件侦听器更简单的解决方案,这些侦听器可能永远不会被清理干净。
相反,如果您可以控制CSS,只需在CSS中执行以下操作:
在JavaScript中,只需使用
setProperty
更新变量即可:vd8tlhqk4#
首先,创建输入:
然后添加以下javascript:
qnakjoqk5#
一个快速的oneliner,它动态地将一个
style
标记附加到正文。niknxzdl6#