• 当前标签:属性节点

程序开发 DOM节点 - 属性节点

<!doctype html>  <html>      <head>          <meta charset="utf-8">          <title>DOM属性节点</title>          <style>              .red-text{                  color: red;                  font-size: 40px;                  font-weight: bold;              }              .kaiti-text{                  font-family: '楷体';              }              .italic-text{                  font-style: italic;              }              .blue{                  color: blue;              }          </style>      </head>      <body >          <p id="fff">今天又下雨了</p>          <a id="baidu" class="red-text kaiti-text"  href="https://www.baidu.com" target="_blank">百度搜索[shift + alt + B]</a>          <script>              var link =document.getElementById('baidu')                           console.log(link.attributes)              // NamedNodeMap 对象表示一个无顺序的节点列表。              // attributes获取属性列表(所有属性)              for(var i = 0; i < link.attributes.length;i++){                  var attr = link.attributes[i]                  // alert(attr.value)                  // value获取属性的值                  // alert(attr.name)                  // name获取属性的名字              }              // var target = link.getAttribute('target')              // alert(target)              // getAttribute获取属性值              // alert(link.href)              // 获取属性值                            link.setAttribute('title','百度一下 你就知道')              // alert(link.getAttribute('title'))              // alert(link.title)              link.title = '百度一下  你就忘了'              // 设置属性值              link.accessKey = 'B'              // alt + shift + b  火狐              // alt + b  谷歌               // link.contentEditable = 'true'              // 标签内容是否可以编辑                //   link.removeAttribute('href')              // 彻底移除属性                // alert(link.hasAttribute('accesskey'))              // hasAttribute检查是否有指定的属性 有 true 无 false                // alert(link.hasAttributes())              // alert(document.body.hasAttributes())              // 是否有属性 任意都算                // class属性              // link.class= 'italic-text'              // link.className = 'italic-text'              // class是关键字 不能使用class              // 使用className控制元素的class属性                // console.log(link.classList)              // link.classList.remove('red-text')              // 移除样式类              // link.classList.add('red-text')              // 添加样式类              // alert(link.classList.contains('red1-text'))              // 是否包含指定样式表              link.classList.toggle('red-text')              link.classList.toggle('red-text')                                 // function ccc(){              var p =document.getElementById('fff')            console.log('ccccc')             p.classList.toggle('red-text')          // //    切换样式类 如果有 则无 如果无 则有          // //    p.classList.toggle('red-text')          // }            p.className = 'red-text blue'          // console.log(p.classList)            // p.classList.add('blue')          // 在元素中添加一个或多个类名            // p.classList.remove('red-text','blue')          // 移除元素中一个或多个类名            // alert(p.classList.contains('blue'))          // 是否包含指定样式类            // alert(p.classList.item(0))              // 修改style属性          p.style.width = '300px'          p.style.height = '200px'          p.style.backgroundColor = 'red'          p.style.padding = '20px'          p.style.display = 'inline-block'          p.style.border = '5px solid blue'          // alert(p.style.border)          // alert(p.style.fontSize)          // 只能获取标签元素style属性定义的样式                    var style = window.getComputedStyle(p,':after')          // 获取所有应用在元素上的有效样式值          console.log(style.fontSize)              </script>      </body>  </html>  

2017-07-14 22:47:25 107 0 0
阅读详情
  • 1
前往