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>
相关推荐:
分享一个jscript与vbscript操作XML元素属性的方法
jscript和vbscript对XML元素属性进行操作的方法
以上就是js操作元素属性操作元素样式详解的详细内容,更多请关注其它相关文章!
上一篇: python中sorted是什么