Explication détaillée des attributs des éléments d'exploitation js et des styles d'éléments d'exploitation-js tutoriel-php.cn

Explication détaillée des attributs des éléments d'exploitation js et des styles d'éléments d'exploitation

小云云

Libérer： 2018-03-10 16:24:21

original

1767 Les gens l'ont consulté

Cet article partage principalement avec vous l'explication détaillée des attributs des éléments d'opération js et du style des éléments d'opération. J'espère qu'il pourra aider tout le monde.

Attributs de l'élément d'opération 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>

Copier après la connexion

Style d'élément d'opération 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>

Copier après la connexion

affichage (aucun, bloc)

<!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>

Copier après la connexion

Recommandations associées :

Explication détaillée de l'utilisation de jquery pour obtenir des éléments, envelopper des éléments et insérer des attributs d'élément

Partager une méthode permettant à jscript et vbscript d'exploiter les attributs d'élément XML

Comment jscript et vbscript fonctionnent sur les attributs des éléments XML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!