Home >Web Front-end >JS Tutorial >Detailed explanation of js operating element attributes and operating element styles

Detailed explanation of js operating element attributes and operating element styles

小云云Original: 2018-03-10 16:24:211797browse

This article mainly shares with you the detailed explanation of js operation element attributes and operation element style. I hope it can help everyone.

js operation element attributes

<!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 operation element style

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

Related recommendations:

Detailed explanation of the usage of jquery to get elements, wrap elements and insert element attributes

Share a method for jscript and vbscript to operate XML element attributes

How jscript and vbscript operate on XML element attributes

The above is the detailed content of Detailed explanation of js operating element attributes and operating element styles. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the difference between python3 and JSNext article：What is the difference between python3 and JS

See more

Detailed explanation of js operating element attributes and operating element styles

js operation element attributes

js operation element style

display(none, block)

Related articles