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>