文章内容

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


黄兵个人博客原创。

转载请注明出处:黄兵个人博客 - 原生 JavaScript 增加内联 css 样式

分享到:

发表评论

评论列表