11 DOM操作样式&属性&值

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>

 

posted @ 2019-07-01 20:32  毛斯钢  阅读(195)  评论(0)  编辑  收藏  举报