DOM节点 – 属性节点

原创 黄良钵  2017-07-14 22:47  阅读 10 次 评论 0 条
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>DOM属性节点</title>  
  6.         <style>  
  7.             .red-text{  
  8.                 color: red;  
  9.                 font-size: 40px;  
  10.                 font-weight: bold;  
  11.             }  
  12.             .kaiti-text{  
  13.                 font-family: '楷体';  
  14.             }  
  15.             .italic-text{  
  16.                 font-style: italic;  
  17.             }  
  18.             .blue{  
  19.                 color: blue;  
  20.             }  
  21.         </style>  
  22.     </head>  
  23.     <body >  
  24.         <p id="fff">今天又下雨了</p>  
  25.         <a id="baidu" class="red-text kaiti-text"  href="https://www.baidu.com" target="_blank">百度搜索[shift + alt + B]</a>  
  26.         <script>  
  27.             var link =document.getElementById('baidu')  
  28.              
  29.             console.log(link.attributes)  
  30.             // NamedNodeMap 对象表示一个无顺序的节点列表。  
  31.             // attributes获取属性列表(所有属性)  
  32.             for(var i = 0; i < link.attributes.length;i++){  
  33.                 var attr = link.attributes[i]  
  34.                 // alert(attr.value)  
  35.                 // value获取属性的值  
  36.                 // alert(attr.name)  
  37.                 // name获取属性的名字  
  38.             }  
  39.             // var target = link.getAttribute('target')  
  40.             // alert(target)  
  41.             // getAttribute获取属性值  
  42.             // alert(link.href)  
  43.             // 获取属性值  
  44.               
  45.             link.setAttribute('title','百度一下 你就知道')  
  46.             // alert(link.getAttribute('title'))  
  47.             // alert(link.title)  
  48.             link.title = '百度一下  你就忘了'  
  49.             // 设置属性值  
  50.             link.accessKey = 'B'  
  51.             // alt + shift + b  火狐  
  52.             // alt + b  谷歌   
  53.             // link.contentEditable = 'true'  
  54.             // 标签内容是否可以编辑  
  55.   
  56.             //   link.removeAttribute('href')  
  57.             // 彻底移除属性  
  58.   
  59.             // alert(link.hasAttribute('accesskey'))  
  60.             // hasAttribute检查是否有指定的属性 有 true 无 false  
  61.   
  62.             // alert(link.hasAttributes())  
  63.             // alert(document.body.hasAttributes())  
  64.             // 是否有属性 任意都算  
  65.   
  66.             // class属性  
  67.             // link.class= 'italic-text'  
  68.             // link.className = 'italic-text'  
  69.             // class是关键字 不能使用class  
  70.             // 使用className控制元素的class属性  
  71.   
  72.             // console.log(link.classList)  
  73.             // link.classList.remove('red-text')  
  74.             // 移除样式类  
  75.             // link.classList.add('red-text')  
  76.             // 添加样式类  
  77.             // alert(link.classList.contains('red1-text'))  
  78.             // 是否包含指定样式表  
  79.             link.classList.toggle('red-text')  
  80.             link.classList.toggle('red-text')  
  81.              
  82.           
  83.         // function ccc(){  
  84.             var p =document.getElementById('fff')  
  85.           console.log('ccccc')  
  86.            p.classList.toggle('red-text')  
  87.         // //    切换样式类 如果有 则无 如果无 则有  
  88.         // //    p.classList.toggle('red-text')  
  89.         // }  
  90.   
  91.         p.className = 'red-text blue'  
  92.         // console.log(p.classList)  
  93.   
  94.         // p.classList.add('blue')  
  95.         // 在元素中添加一个或多个类名  
  96.   
  97.         // p.classList.remove('red-text','blue')  
  98.         // 移除元素中一个或多个类名  
  99.   
  100.         // alert(p.classList.contains('blue'))  
  101.         // 是否包含指定样式类  
  102.   
  103.         // alert(p.classList.item(0))  
  104.   
  105.   
  106.         // 修改style属性  
  107.         p.style.width = '300px'  
  108.         p.style.height = '200px'  
  109.         p.style.backgroundColor = 'red'  
  110.         p.style.padding = '20px'  
  111.         p.style.display = 'inline-block'  
  112.         p.style.border = '5px solid blue'  
  113.         // alert(p.style.border)  
  114.         // alert(p.style.fontSize)  
  115.         // 只能获取标签元素style属性定义的样式  
  116.           
  117.         var style = window.getComputedStyle(p,':after')  
  118.         // 获取所有应用在元素上的有效样式值  
  119.         console.log(style.fontSize)  
  120.   
  121.   
  122.         </script>  
  123.     </body>  
  124. </html>  
本文地址:https://xn--nf1a578axkh.xn--fiqs8s/747.html
关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情