@H_301_7@DOM *** 作样式&属性&值
1 <!DOCTYPE HTML> 2 <HTML lang="en"> 3 <head> 4 <Meta charset="UTF-8"> 5 <Meta http-equiv="X-U-Compatible" content="IE-edge"> 6 <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1"> 7 <Title>DOM *** 作样式&属性&值</Title> 8 <style type="text/CSS"> 9 #Box2{ 10 background-color: red; 11 float: left; 12 } 13 #Box3{ 14 background-color: green; 15 float: left; 16 } 17 #Box4{ 18 height: 800px; 19 wIDth:1240px; 20 float: right; 21 } 22 .cls{ 23 margin: 20px; 24 height: 100px; 25 wIDth: 200px; 26 background-color: #ff6700; 27 float: left; 28 } 29 .active{ 30 display: none; 31 } 32 </style> 33 </head> 34 <body> 35 <button ID="btn" style="display: block" >设置</button> 36 <input style=‘margin: 20px‘ type="text" value="嘿嘿嘿" ID="ipt" > 37 <div class="cls" ID = ‘Box1‘>Box1</div> 38 <div class="cls" ID = ‘Box2‘>Box2</div> 39 <div ID="Box3" class="cls"></div> 40 <button ID="btn2" style="display: block; margin: 20px;">隐藏</button> 41 <a ID="Box4" href="JavaScript:voID(0);"><img src="./images/image.jpg" alt="上一张" ID="prev"></a> 42 <script type="text/JavaScript"> 43 function $(ID) { 44 return document.getElementByID(ID); 45 } 46 // 标签样式 *** 作 this.style.backgroundcolor 47 var tmp1 = document.getElementByID(‘Box1‘); 48 tmp1.onclick = function () { 49 // 获取节点的样式属性值 点语法 get和set方法 50 console.log(this.style.height); 51 console.log(this.style.wIDth); 52 console.log(this.style.backgroundcolor); 53 // 修改样式属性 通过Js设置的时候 要写成驼峰标识 backgroundcolor 54 this.style.backgroundcolor=‘green‘; 55 this.style.height=‘150px‘; 56 this.style.wIDth=‘300px‘; 57 }; 58 59 // 切换标签样式 60 var tmp2 = document.getElementByID(‘Box2‘); 61 isRed = true; 62 tmp2.onclick = function () { 63 if(isRed){ 64 this.style.backgroundcolor=‘green‘; 65 isRed = false; 66 }else{ 67 this.style.backgroundcolor=‘red‘; 68 isRed = true; 69 } 70 }; 71 72 // 标签值的 *** 作 innerText INNERHTML input 73 $(‘btn‘).onclick = function () { 74 console.log($(‘Box1‘).innerText); // 只获取文本 75 console.log($(‘Box2‘).innerText); // 获取的是所有的节点 （文本和标签 换行） 76 $(‘Box1‘).innerText = ‘bbbbbBox1‘; // 对标签文本内容的设置 77 $(‘Box2‘).INNERHTML = ‘<h1>Box2Box2</h1>‘; 78 // 表单控件 中有value属性的 必须通过 value来设置值和赋值 79 console.log($("ipt").value); 80 $("ipt").value = ‘嘻嘻嘻！‘; 81 }; 82 83 // 标签属性的 *** 作 getAttribute setAttribute 84 $(‘prev‘).onmouSEOver = function () { 85 console.log(this.getAttribute(‘src‘)); // 获取标签的属性 getAttribute 这里取的是相对路径 86 console.log(this.getAttribute(‘ID‘)); 87 console.log(this.getAttribute(‘alt‘)); 88 console.log(this.src); // 获取标签的属性 这里取的绝对路径 89 console.log(this.ID); 90 console.log(this.alt); 91 this.setAttribute(‘src‘,‘./images/image-hover.jpg‘); // 设置属性 92 //this.src = ‘./images/image-hover.jpg‘; // 设置属性 93 }; 94 $(‘prev‘).onmouSEOut = function () { 95 this.src = ‘./images/image.jpg‘; // 设置属性 96 }; 97 98 // 显示隐藏 99 /*100 $(‘btn2‘).onclick = function () {101 if($(‘Box3‘).style.display == ‘none‘){102 $(‘Box3‘).style.display = ‘block‘;103 this.innerText = ‘隐藏‘;104 }else{105 $(‘Box3‘).style.display = ‘none‘;106 this.innerText = ‘显示‘;107 }108 };109 */110 //切换 初始化的时候会有渲染开销 网页中频繁的性切换 我们建议大家使用这种方式111 var isShow = true;112 $(‘btn2‘).onclick = function(){113 if (isShow) {114 // 在Js中设置类得通过classname115 $(‘Box3‘).classname += ‘ active‘;116 this.innerText = ‘显示‘;117 isShow = false;118 }else{119 // 在Js中设置类得通过classname120 $(‘Box3‘).classname = ‘cls‘;121 this.innerText = ‘隐藏‘;122 isShow = true;123 }124 };125 </script>126 </body>127 </HTML>总结
以上是内存溢出为你收集整理的11 DOM *** 作样式&属性&值全部内容，希望文章能够帮你解决11 DOM *** 作样式&属性&值所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）