JS批量给元素添加css样式或attr标签

最新推荐文章于 2024-03-17 21:57:30 发布

原创最新推荐文章于 2024-03-17 21:57:30 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #jquery #js #css3

JS & Jquery 同时被 2 个专栏收录

87 篇文章

订阅专栏

HTML & CSS

11 篇文章

订阅专栏

本文介绍了如何使用JavaScript高效地为多个HTML元素批量添加CSS样式和属性。通过选择器选取元素，利用JavaScript的遍历与操作DOM的方法，实现元素的批量更新，提升了网页动态效果的实现效率。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <span name="ipt" id="ipt">批量给元素添加css样式或attr标签</span>
    <script type="text/javascript">
        var cssParas = [];
        cssParas.push({ "color": "red" });
        cssParas.push({ "font-size": "12px" });
        cssParas.push({ "font-weight": "200" });
        setCss("ipt", cssParas)

        var attrParas = [];
        attrParas.push({ "data-id": 100 });
        attrParas.push({ "data-name": "12px" });
        attrParas.push({ "data-weight": "200" });
        setAttr("ipt", attrParas)

        /**
         * 设置控件的CSS属性
         * @param objId  控件ID
         * @param paras  属性集合
         */
        function setCss(objId, cssParas) {
            for (var key of cssParas) {
                $("#" + objId).css(key, cssParas[key])
            }
        }

        /**
         * 设置控件的Attr属性
         * @param objId
         * @param paras
         */
        function setAttr(objId, attrParas) {
            for (var key of attrParas) {
                $("#" + objId).attr(key, attrParas[key])
            }
        }
    </script>
</body>
</html>