文章内容
2022/10/10 20:51:03,作 者: 黄兵
原生 JavaScript 增加内联 css 样式
在这篇文章中介绍了:Javascript 元素增加 class 的方法,这个方法主要是加载 css 样式。
如果我们需要增加某个元素的内联样式,我们可以这样做:
我们可以使用 querySelectorAll 选择元素,之后循环这些元素:
function changeOpacity(className) {
var elems = document.querySelectorAll(className);
var index = 0, length = elems.length;
for ( ; index < length; index++) {
elems[index].style.transition = "opacity 0.5s linear 0s";
elems[index].style.opacity = 0.5;
}
}上面的写法也可以简写:
function setTransition(className) {
document.querySelectorAll(className).forEach(
el => el.style.transition = "opacity 0.5s linear 0s";
});
}这里使用了 forEach 的循环方式,精简了代码。
参考资料
1、Using querySelectorAll to change the style property of multiple elements
黄兵个人博客原创。
评论列表