如何在不使用javascript访问DOM的情况下动态更改样式？

Question

我有一个包含多个字段的表单，我想基于用户操作动态更改字段的样式（边框）我正在改变当前字段事件处理程序中当前和下一个字段的DOM样式，如下所示，是有没有其他方法可以不改变DOM而且没有jquery动态改变样式？

document.getElementById("xyz").style.borderColor = "#FFF";
document.getElementById("xyz").style.borderWidth = "2px";

Answer 1

你可以上课。例如，您可以设置此类：

.error {
    color: red;
}

并使用jQuery将其应用于不同的元素，例如：

$(this).addClass('error');

这就是我在自己的项目中所做的。您可以使用JavaScript，但jQuery使它更容易和更清洁：）

Answer 2

首先在要更改的所有元素上设置class或attribute，然后在querySelectorAll之间设置，然后使用forEach循环并遍历所选标记将className更改为您想要的任何内容，这会动态地改变所有内容。

示例：

在下面的示例代码中，我为要选择的所有元素设置了一个类.style1，然后我querySelectorAll('.style')，通过这些选定的元素循环，将className更改为{{1} }，将边框颜色从蓝色更改为红色。

＆＃13;

＆＃13;

.style2

＆＃13;

init=()=>{
	//SELECT & BIND (CLICK) EVENT
	var tags = document.querySelectorAll('.style1');
	//LOOP THROUGH TAGS WITH CLASS (.style1) AND CHANGE TO (.style2)
	tags.forEach((o)=>o.className = "style2");
}
//ON DOCUMENT LOAD RUN INIT
document.addEventListener('DOMContentLoaded',init);

＆＃13;

.style1{
	border: 1px solid blue;
}
.style2{
	border: 1px solid red;
}

＆＃13;

＆＃13;

＆＃13;