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

PHP中文网 • 2025年3月8日 16:58:29 • 编程技术 • 阅读 2

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

js操作元素属性

nbsp;html>                Title            *{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;}            女生的特点: 喜欢逛吃逛吃逛吃,呜呜呜呜
    
    
    
    
            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]);

登录后复制

js操作元素样式

nbsp;html>                Title            *{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;        }            hello wold!
    
            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";

登录后复制

display(none、block)

nbsp;html>                Title            *{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;        }                            
            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";        };

登录后复制