通过JS方法获取设置元素属性和属性值
获取元素的样式：DOM.style
<body><div>div>body>
<script>
var box = document.querySelector('div')
console.log(box.style) //输出的是可以设置的CSS属性
script>
当css属性只有一个英文单词的时候，可以借助对象方式进行操作
元素.style.css属性 = "css属性值"
box.style.color = 'red'
当css属性有多个英文单词的时候
元素.style.css属性值驼峰式写法 = "css属性值"
box.style.fontSize = "30px"
元素.style["css属性"] = "css属性值"
box.style['background-color'] = "pink"
使用style方式可以给元素赋上样式，这种方式给的样式是行内样式
获取非行内样式有两种写法
window.getComputedStyle("元素")// 1. 获取非行内样式
var box = document.querySelector('div')
console.log(box.style.width) // 输出空，没办法获取到
console.log(window.getComputedStyle(box).width)
// 2. 兼容写法 由于querySelector() 获取元素结构的时候有兼容问题，所以不推荐使用
var box = document.getElementsByTagName('div')[0] //集合
if(window.getComputedStyle){
var res = window.getComputedStyle(box).width
}
else{
var res = box.currentStyle.width
}
console.log(res)
// 3. 封装非行内样式获取的使用函数
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele)[attr]
}
else{
return ele.currentStyle[attr]
}
}
var box = document.getElementsByTagName('div')[0]
var res = getStyle(box,'width')
console.log(res)
元素.value
<body>
<input type="text" name="" id="">
<select name="" id="">
<option value="">选择你的城市option>
<option value="1">深圳option>
<option value="2">广州option>
<option value="3">东莞option>
<option value="4">佛山option>
select>
<button >提交button>
body>
<script>
// 获取文本框
var input = document.querySelector("[type='text']")
// 获取下拉框
var select = document.querySelector("select")
var btn = document.querySelector("button")
// 获取value值
btn.onclick = function(){
console.log(input.value)
console.log(select.value)
//获取select对应设置好value
}
script>
可以通过操作元素类型的方法批量操作样式
添加：元素.className = '类名'
输出：元素.className = ''
<style>
.active{
color:red
}
style>
<body>
<div>测试文本！！！div>
<button onclick="add()">点击切换button>
<button onclick="del()">点击删除button>
body>
<script>
var div = document.querySelector("div")
// 1. 添加：元素.className = '类名'
function add(){
div.className = "active"
}
// 2. 删除：元素.className = ''
function del(){
div.className = ""
}
script>
添加：元素.classList.add('类名')
删除：元素.classList.remove('类名')
切换：元素.classList.toggle('类名')
var p = document.querySelector('p')
// 1. 添加 元素.classList.add('类名')
p.classList.add('active')
// 2. 删除 元素.classList.remove('类名')
p.classList.remove('active')
// 3. 切换 元素.classList.toggle('类名')
function fn(){
p.classList.toggle('active')
}
直接使用属性名进行操作即可
1. 获取：元素.属性名
2. 设置：元素.属性名 = "属性值"
注意：
- 原生属性内有特殊的布尔类型属性
- checked、disabled 这种属性获取到的值是布尔值，也可以直接设置布尔值进行操作
<body>
<input type="checkbox" checked>
body>
<script>
var input = document.querySelector('input')
console.log(input.type) // checkbox
console.log(input.checked) // true
script>
案例：密码可视化
1. 增加 `元素.setAttribute('属性名','属性值')`
2. 删除 `元素.removeAttribute('属性名')`
3. 修改 `元素.setAttribute('属性名','属性值')`
4. 查询 `元素.getAttribute('属性名')`
<body>
<div>测试文本！！！div>
<button>添加颜色button>
<button>删除颜色button>
<button>更换颜色button>
body>
<script>
var box = document.querySelector("div")
// 增加
var btn1 = document.querySelector("button:nth-of-type(1)")
btn1.onclick = function(){
box.setAttribute("style","color:red")
}
// 删除
var btn2 = document.querySelector("button:nth-of-type(2)")
btn2.onclick = function(){
box.removeAttribute("style")
}
// 修改
var btn3 = document.querySelector("button:nth-of-type(3)")
btn3.onclick = function(){
box.setAttribute("style","color:green")
}
// 查询
console.log(box.setAttribute('style')) // 没有获取到就会返回NULL
script>
常见：：
- data- 开头的表示是H5中自定义属性
- data-xxx 后面的内容才是当前属性名
- 在等于号后面的才是当前属性的属性值
- 自定义会本身携带一个属性：dataset
语法：自定义的语法
1. 增加 `元素.dataset.属性名`
2. 删除 `delect 元素.dataset.属性名`
3. 查询 `元素.dataset.属性名`
<p>p>
<script>
var p = document.querySelector('p')
// 1. 增
p.dataset.nianLing = 18
// 2. 删
delete p.dateset.nianLing
// 3. 查
console.log(p.dataset.nianLing)
script>
JS方法中有三个经常用来操作（插入/替换）元素的内容
DOM元素.innerHTMLDOM元素.innerHTML="新文本内容"DOM元素.innerHTML="新文本内容"DOM元素.innerTextDOM元素.innerText="新文本内容"Dom元素.outerHTMLDom元素.outerHTML = "重新设置的文本内容"