本文主要和大家分享js操作元素属性操作元素样式详解,希望能帮助到大家。 js操作元素属性 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操作元素样式 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) 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"; }; 로그인 후 복사相关推荐: jquery获取元素,包裹元素和插入元素属性用法详解 分享一个jscript与vbscript操作XML元素属性的方法 jscript和vbscript对XML元素属性进行操作的方法