web前端js基础之“json”格式的运用，及封装的简单运用

最新推荐文章于 2022-12-05 10:53:47 发布

空投在我怀里

最新推荐文章于 2022-12-05 10:53:47 发布

阅读量250

点赞数

分类专栏： web前端js基础文章标签： js 封装 json css

本文链接：https://blog.csdn.net/wrk2466836002/article/details/83346942

版权

web前端js基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>第1行</p>
    <p>第2行</p>
    <p>第3行</p>
</body>
</html>

<script>
    // 方法1：js为标签加样式
    var ps = document.getElementsByTagName("p");
    for(var i = 0; i< ps.length;i++){
        ps[i].style.border = "1px solid red";
        ps[i].style.width = "200px";
        ps[i].style.height = "60px";
        ps[i].style.color = "blue";
    }
</script>

<script>
    // 方法2：利用函数封装较长的功能

    function tag(tagname) {
       return document.getElementsByTagName(tagname);
    }
    var ps = tag("p");//浅拷贝
    function fzys(nameB,width,height,color,border){
         for(var i = 0;i< ps.length;i++){
            ps[i].style.width = width;
            ps[i].style.height = height;
            ps[i].style.color = color;
            ps[i].style.border = border;
        }
    }
    fzys("p","200px","60px","red","1px solid blue");
</script>

<script>
    // 方法3：改良方法2
    function tag(tagname){
        return document.getElementsByTagName(tagname);
    }

    function addclass(add,styles) {
        for(var i = 0;i< add.length; i++){
            for(var k in styles){
                add[i].style[k] = styles[k];
            }
        }
    }
    ps = tag("p");

     addclass(ps,{border:'1px solid red',width: '100px',height: '60px'});
</script>

<script>
    //方法4：改良3
    var jsonnr = {
       tag:function (tagname) {
           return document.getElementsByTagName(tagname);
       },
        addcss:function (add,styles) {
            for(var i = 0;i< add.length;i++){
                for(var k in styles){
                    add[i].style[k] = styles[k];
                }
            }
        }
    }
    var ps = jsonnr.tag("p");

    jsonnr.addcss(ps,{width:'100px',height:'60px',border:'1px solid red',color:'blue'})
</script>