欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-18 14:09:32
...
本文主要和大家分享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>

相关推荐:

jquery获取元素,包裹元素和插入元素属性用法详解

分享一个jscript与vbscript操作XML元素属性的方法

jscript和vbscript对XML元素属性进行操作的方法

以上就是js操作元素属性操作元素样式详解的详细内容,更多请关注其它相关文章!