持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
操作元素类名
我们有两种方式操作元素类名
按照原生属性操作
设置类名
元素.className = 'box'
修改类名
元素.className = '新值'
追加类名
元素.className = 元素.className + '新类名'
注意: 新类名前面要有一个 空格
删除类名
获取类名
1. 截取字符串
2. 按照空格切开, 循环遍历, 找到一个你想删除的删除掉
3. 再写一遍
//css部分
div {
width: 100%;
height: 50px;
position: absolute;
top: -50px;
left: 0;
background-color: skyblue;
transition: top .5s linear; }
div.box {
top: 0;
}
button {
margin-top: 100px;
}
// 0. 获取元素
var div = document.querySelector('div')；
// 1-1. 设置类名
div.className = 'box'；
// 1-2. 修改类名
div.className = 'box2'；
// 1-3. 追加类名
div.className += ' abc'；
H5 标准提供给我们的 API
元素身上有个属性 classList
里面包含了所有元素身上设置的类名
classList 提供了一系列方法来操作
** 1. add()**
使用方法: 元素.classList.add('你要添加的类名')
** 2. remove()**
使用方法: 元素.classList.remove('你要移除的类名')
3. toggle()
使用方法: 元素.classList.toggle('你要切换的类名')
当元素有这个类名的时候, 就删除，反之没有就添加。
// 2-1. 添加类名
div.classList.add('box')；
// 2-2. 删除类名
div.classList.remove('h')；
// 2-3. 切换类名
var btn = document.querySelector('button')；
btn.onclick = function () {
div.classList.toggle('box')；
}
console.log(div.classList)；
操作元素文本内容
1. innerHTML
一个读写的属性
操作元素的超文本内容
读: 获取元素内部的所有内容，返回方式为字符串形式
使用方法: 元素.innerHTML
写: 设置元素内部的超文本内容
完全覆盖式书写
使用方法: 元素.innerHTML = '你要设置的内容'（自动解析）
2. innerText
一个读写的属性
操作元素的文本内容
读: 获取子元素内部（包括后代）的所有文本内容
标签内容不获取
使用方法: 元素.innerText
写: 设置元素内部的文本内容
完全覆盖式的写入
使用方法: 元素.innerText = '你要设置的值'（不自动解析）
3. value
一个读写的属性
操作表单元素的 value 属性
读: 获取表单元素的 value 值
使用方法: 元素.value
写: 设置表单元素的 value 值
使用方法法: 元素.value = '你要设置的值'
//html结构部分<div>
hello world
<p>你好 世界</p>
hello world
</div>
<input type="text">
var div = document.querySelector('div')；
var inp = document.querySelector('input')；
// 1. innerHTML
// 1-1. 获取元素的超文本内容
var str = div.innerHTML；
console.log(str)；
console.log(typeof str)；
// 1-2. 设置元素的超文本内容
div.innerHTML = '<span>我是新来的内容</span>'；
// 2. innerText
// 2-1. 获取元素的文本内容
var str = div.innerText；
console.log(str)；
// 2-2. 设置元素的文本内容
div.innerText = '<span>我是新来的内容</span>'；
// 3. value 属性
// 3-2. 设置元素的 value 值
inp.value = '你好 世界'；
// 3-1. 获取元素的 value 值
var str = inp.value；
console.log(str)；
操作元素样式
1. 行内样式
style 的方式
利用原生属性的方式
元素.style
获取到的内容是一个对象, 里面包含元素所有的可设置样式
但是 只能获取到行内样式
2. 非行内样式
2-1. window.getComputedStyle() 方法
标准浏览器
语法: window.getComputedStyle(要获取样式的元素)
返回值: 一个对象, 里面包含所有可设置样式, 每一个样式都有值, 那你没有设置的有默认值
你需要那一个样式, 直接再找个对象里面访问就可以了
2-2. currentStyle 属性
IE 低版本
语法: 要获取样式的元素.currentStyle
得到的就是一个对象, 里面包含元素的所有可设置样式, 每一个样式都有值
你需要哪一个样式, 直接再对象里面查找就可以了
特别说明:
如果你使用 点语法获取样式
你获取带有中划线的样式要转化成驼峰的方式
如果你使用 数组关联语法获取样式
你可以写中划线
设置元素 只有一种方式
设置元素得行内样式
前端 JS 理论上是不可以设置元素得非行内样式
设置行内样式
使用方法: 元素.style.样式名 = '值'
