文章内容
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
黄兵个人博客原创。
评论列表