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中设置类得通过className 115 $('box3').className += ' active'; 116 this.innerText = '显示'; 117 isShow = false; 118 }else{ 119 // 在js中设置类得通过className 120 $('box3').className = 'cls'; 121 this.innerText = '隐藏'; 122 isShow = true; 123 } 124 }; 125 </script> 126 </body> 127 </html>