元素的属性
1. 获取元素的某些属性
- 语法: 元素.getAttribute('要查询的属性名')
- 返回值: 查询到属性时返回对应的属性值, 没有查询到时直接返回 null
2. 修改元素的某些属性
- 语法: 元素.setAttribute('对应的属性名', '对应的属性值')
- 注意: 如果元素没有对应的属性名, 那么相当于是新增一个属性
3. 删除元素的某些属性
- 语法: 元素.removeAttribute('要删除的属性名')
<body>
<div class="box" a="QF001"></div>
<script>
// 0. 获取元素
var oDiv = document.querySelector('.box')
//1. 获取元素的某些属性
console.log(oDiv.getAttribute('a'))//结果显示为QF001
console.log(oDiv.getAttribute('class'))//结果显示box
console.log(oDiv.getAttribute('b'))//没有这个属性名,显示为null
//2. 修改元素的某些属性
oDiv.setAttribute('a', 'QF999')//属性名存在,修改属性值为QF999
oDiv.setAttribute('b', 'qwer')//属性名不存在,新增属性和属性值
oDiv.setAttribute('class', 'new_box')//属性名存在,修改属性值为new_box
console.log(oDiv.getAttribute('a'))//因为修改了属性值,打印出来a的属性值为QF999
//3. 删除元素的某些属性
oDiv.removeAttribute('class')//删除class这个属性
oDiv.removeAttribute('a')//删除a这个属性
</script>
</body>
元素样式
方法1:元素.style.某个属性
注意:
- 我们也可以给这个语法重新赋值, 达到修改元素样式的效果 (修改的是行内的样式)
- 这种语法获取到的元素样式, 只能获取到行内样式
方法2:window.getComputedStyle(元素).要查询的css属性
注意:
- 这种方式获取到的属性 是只读的能获取到, 但是不允许修改
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box" style="background-color: red;"></div>
<script>
// 0. 获取元素
var oDiv = document.querySelector('.box')
// 1. 获取元素样式
console.log(oDiv.style.width)
console.log(oDiv.style.height)
console.log(oDiv.style.background-color) // 直接这样写相当于写了一个 oDiv.style.background - color, 这是一个错误写法
console.log(oDiv.style['background-color']) // 中括号语法
console.log(oDiv.style.backgroundColor) // 驼峰命名
// 2. 设置元素样式
oDiv.style.width = 666 + 'px'
oDiv.style.backgroundColor = 'red'
//3. 获取非行内样式
console.log(window.getComputedStyle(oDiv).width)
console.log(window.getComputedStyle(oDiv).backgroundColor)
window.getComputedStyle(oDiv).width = 800 + 'px' // 不允许修改, 会有报错
</script>
</body>
元素类名
1.className
- 专门用来操作元素的类名
- 语法: 元素.className
- 我们也可以给他重新赋值, 来达到修改元素的类名
2. classList
- 获取元素类名:元素.classList
- 新增元素类名:元素.classList.add('类名')
- 删除元素类名:元素.classList.remove('类名')
<body>
<div class="box new_box"></div>
<script>
// 0. 获取元素
var oDiv = document.querySelector('.box')
//1.1 获取类名
console.log(oDiv.className)
//1.2 重新赋值类名
oDiv.className = 'qwer'//如果类名有2个以上,重新赋值会把已有的类名全部删除,再赋值
// 2.1 获取类名
console.log(oDiv.classList)
// 2.2 新增类名
oDiv.classList.add('qwer')
// 2.3 删除类名
oDiv.classList.remove('new_box')
</script>
</body>
