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

我有一个具有多个字段的表单，我想根据用户操作动态更改字段的样式（边框）我正在更改当前字段事件处理程序中当前字段和下一个字段的DOM样式，如下所示任何其他方式不改变DOM和没有jQuery的动态改变风格？如何在不访问DOM的情况下动态更改样式？

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

来源

2017-04-12 Yasaman Emami

你介意使用jQuery？它会容易得多。 –

您必须改变DOM –

您可以将样式存储在CSS中并更改元素上的类名称...... –

首先设置所有要更改，然后要么querySelectorAll元素的class或attribute，然后用forEach环路和环路通过选定的标签变化无论你想要什么，这都会动态地改变一切。

实施例：

在示例代码下面我设置一个类.style1上我想选择那么将所有元件我querySelectorAll('.style')，通过这些选择的元素的循环改变className到.style2，这改变边框颜色从蓝色到红色。

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

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

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

来源

2017-04-12 20:22:18

你可以玩上课。例如，你可以有这个类设置：

.error { 
    color: red; 
}

，只是使用jQuery，喜欢它适用于不同的元素：

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

这就是我对我自己的项目做。您可以使用JavaScript，但jQuery的使得它更容易和更清洁的:)

来源

2017-04-12 15:19:31

addClass更改DOM –

@AndrewParamoshkin当然，但你必须改变**的东西**，是吗？ –

它使你更容易，但更难浏览器/客户端... – MarcelD

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

回答

相关问题