js操作元素属性操作元素样式详解

小云云 原创: 2018-03-10 16:24:21 1351浏览

本文主要和大家分享js操作元素属性操作元素样式详解，希望能帮助到大家。

js操作元素属性

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键字,关键词">
    <meta name="Description" content="描述和简介">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
        a{text-decoration:none;}
        img{border:none;}
        ol,ul{list-style:none;}
    </style></head><body>
    <!--
        js中的属性
            1: 可读可写
                获取原有的内容
                设置新的内容

            2: 可读不可写
                获取原有的值时
                length
        2: 属性操作
            1: 合法属性的操作
                直接点操作(可读可写)
                    class比较特殊,需要操作calssName
                    不能直接操作不合法属性,如果直接操作,他将变成js自定义属性
                    直接在等号后面赋值

                获取元素之间的区别
                    1: 获取集合(动态变化的)
                        集合不是一个固定的东西
                        更改值之后,就不在指向原来的元素
                        length同时会发生改变
                        用一次获取一次
                        动态方法(class 标签名 选择器 name)

                    2: 获取单个(静态的)
                        改变的都是同一个元素,不是集合
                        获取和修改都是对一个对象进行操作
                        静态方法(id)

            2: 不合法属性的操作(指标签里面的自定义属性)
                1: 获取属性 getAttribute
                2: 设置 / 修改属性和值     setAttribute
                3: 移除属性     removeAttribute

            3: 中括号的使用 []
                1: 可以直接获取合法属性,在中括号中需要引号
                2: 获取集合中的第几个元素
                3: 代替大多数的点,只要把点后面的属性值变成字符串就可以了
                    获取已知属性,但是属性没有办法直接点或者属性是变量 就用[]
    -->
    <p id="box" class="wrap" title="小花" dachui="大锤" style="height:100px;width:200px;">女生的特点: 喜欢逛吃逛吃逛吃,呜呜呜呜</p>
    <p class="wrap"></p>
    <p class="wrap"></p>
    <p class="wrap"></p>
    <p class="wrap"></p>
    <script>
        var oBox = document.getElementById("box");        var aBox = document.getElementsByClassName("wrap");/*        oBox.innerHTML = "总结: 火车";
        alert( oBox.innerHTML );
        alert( oBox.innerHTML = "总结: 火车" );

        aBox.length = 4;
        var aa = aBox.length;
        alert(aa);//5
 */

       /* oBox.id = "mojing";
        var x = oBox.id;
        //alert(oBox.id);

        oBox.className = "aa";
        var y = oBox.className;
        alert(y);

        var z = oBox.title;
        //alert(z);

        var zz = oBox.dachui;//这种写法属于js的自定义属性
        //alert(zz);*/

        /*
       alert(oBox.id);
       oBox.id = "mojing";
       alert(oBox.id);
       alert(oBox.innerHTML);

        alert(aBox.length);//打印5
        aBox[0].className = "bb";
        aBox[0].innerHTML = "魔镜魔镜,谁是世界上最爱笑的女生!";
        alert(aBox.length);//打印4
         */
        /*
        //获取标签中的自定义属性   getAttribute
        //var x = oBox.getAttribute("dachui");
        //alert(x);

        alert( oBox.getAttribute("id") );

        //设置自定义属性和值  setAttribute
        oBox.setAttribute("xiaotiantian" , "小甜甜");

        oBox.setAttribute("dachui" , "xiaotiantian");

        //移除自定义属性   removeAttribute
        oBox.removeAttribute("dachui");
        oBox.removeAttribute("xiaotiantian")*//*
        //oBox.id = "wrap";
        oBox["id"] = "wrap2";//不推荐使用这种方式获取

        aBox[0].className = "aa";*/

    var dachui = 3;
    oBox.dachui = 2;//js的自定义属性
    //alert(dachui);

    var x = "width";
    alert(oBox.style[x]);    </script></body></html>

js操作元素样式

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键字,关键词">
    <meta name="Description" content="描述和简介">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
        a{text-decoration:none;}
        img{border:none;}
        ol,ul{list-style:none;}
        #box{            width:200px;        }
        #css1.aa{            width: 100px;            height:100px;            background: pink;        }
    </style></head><body>
    <!--
        js操作元素样式
            1: 样式 外部 内部 行内时
                不采用后台操作,纯js不能修改外部样式,只能修改内部和行内样式
            2: 修改方式
                1: 拼接内部样式(很麻烦,考虑优先级,必须知道id的值是什么,不常用)
                2: 行内样式
                    对象.属性.属性 = "数值";
                    oBox.style.cssFloat = "";//火狐
                    oBox.style.styleFloat = "";//ie

                    获取样式:只能获取行内样式,不能获取内部和外部的样式

                    复合属性: 去掉横杆,然后采取驼峰命名法

                3: class方式修改样式

    -->
    <p id="box" style="width:100px;height: 100px;background: pink;float:left;">hello wold!</p>
    <p id="css1" style="margin-left:50px;"></p>

    <script>
        var oBox = document.getElementById("box");        var oCss = document.getElementById("css1");        //alert(oBox);/*        var oCss = document.getElementById("css");
        oBox.style.cssText = "width: 100px;height: 100px;border:1px solid red;";*/

        oBox.style.width = "300px";
        oBox.style.float = "right";

        oCss.className = "aa";        //oBox.innerHTML = oBox.innerHTML + "你好,是你的益达";
        oBox.innerHTML += "你好,是你的益达";

        oCss.style.marginLeft = "100px";    </script></body></html>

display(none、block)

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键字,关键词">
    <meta name="Description" content="描述和简介">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
        a{text-decoration:none;}
        img{border:none;}
        ol,ul{list-style:none;}
        #box{            position: relative;        }
        #box img{            position: absolute;            top: 0;            left: 0;            display: none;        }
        #box #img1{            display: block;        }
    </style></head><body>
    <p id="box">
        <img id="img1" src="images/1.jpg" alt="">
        <img id="img2" src="images/2.jpg" alt="">
    </p>

    <script>
        var oImg1 = document.getElementById("img1"),
            oImg2 = document.getElementById("img2");

        oImg1.onclick = function (){
            this.style.display = "none";
            oImg2.style.display = "block";
        };

        oImg2.onclick = function (){
            this.style.display = "none";
            oImg1.style.display = "block";
        };    </script></body></html>

js操作元素属性操作元素样式详解

js操作元素属性

js操作元素样式

display(none、block)

相关文章

￥189

￥59

￥69

￥71

￥89

￥62