如何在不使用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更改为.style2 ，这将边框颜色从蓝色更改为红色。

 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); 

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

  <form> <input type="email" class="style1"> <input type="password" class="style1"> <textarea class="style1"></textarea> </form>