DOM节点 - 属性节点 - 会coding的HAM

<!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>

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论