JS创建并设置标签样式的小案例

面向过程例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 20px;
            width: 200px;
        }
    </style>
</head>
<body>
//div * 3
//统一设置div样式,设置边框 "1px solid red"
//p * 3
//统一设置p样式,设置边框 "1px solid red"
<div></div>
<div></div>
<div></div>
<p>我是第个1标签</p>
<p>我是第个2标签</p>
<p>我是第个3标签</p>
</body>
<script>
    //问题:有大量的重复代码(代码冗余)
    //01 获得页面中所有的div
    var divs = document.getElementsByTagName("div");
    //02 遍历标签数组
    for (var i = 0; i < divs.length; i++) {
        //03 设置每个标签的样式
        divs[i].style.border = "1px solid red";
    }
    //01 获得页面中所有的p标签
    var ps = document.getElementsByTagName("p");
 //02 遍历标签数组
    for (var i = 0; i < ps.length; i++) {
        //03 设置每个标签的样式
        ps[i].style.border = "1px solid red";
    }
</script>

———————————————————————————————————————

函数封装小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 20px;
            width: 200px;
        }
    </style>
</head>
<body>

//div * 3
//统一设置div样式,设置边框 "1px solid red"
//p * 3
//统一设置p样式,设置边框 "1px solid red"

<div></div>
<div></div>
<div></div>

<p>我是第个1标签</p>
<p>我是第个2标签</p>
<p>我是第个3标签</p>

</body>
<script>

    //问题:01 全局变量污染
    //     02 不方便阅读,维护麻烦,结构不清晰

    var divs = tag("div");
    setStyle(divs);
    var ps = tag("p");
    setStyle(ps);

    function tag(tagName) {
        return document.getElementsByTagName(tagName);
    }
    function setStyle(param) {
        for (var i = 0; i < param.length; i++) {
            //03 设置每个标签的样式
            param[i].style.border = "1px solid red";
        }
    }
</script>
</html>

———————————————————————————————————————

面向对象小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 20px;
            width: 200px;
        }
    </style>
</head>
<body>
//div * 3
//统一设置div样式,设置边框 "1px solid red"
//p * 3
//统一设置p样式,设置边框 "1px solid red"
<div></div>
<div></div>
<div></div>
<p>我是第个1标签</p>
<p>我是第个2标签</p>
<p>我是第个3标签</p>
</body>
<script>
    //问题:01 全局变量污染
    //     02 不方便阅读,维护麻烦,结构不清晰
    var divs = $.tag("div");
    $.setStyle(divs);
    var ps = $.tag("p");
    $.setStyle(ps);
    //可以使用对象来进行封装(让上面所有的变量都成为某个对象的属性或者是方法)
    var $ = {
        getEle:{
            tag:function (tagName) {
                return document.getElementsByTagName(tagName);
            },
            id:function (id) {
                return document.getElementById(id);
            },
            className:function (className) {
                return document.getElementsByClassName(className);
            },
        },
        setCss:{
            setStyle:function (param) {
                for (var i = 0; i < param.length; i++) {
                    //03 设置每个标签的样式
                    param[i].style.border = "1px solid red";
                }
            }
        }
    }
</script>
</html>

JS创建并设置标签样式的小案例

面向过程例子：

函数封装小例子

面向对象小例子

推荐阅读更多精彩内容