DOM修改样式
通过修改html来实现修改元素样式的目的(间接修改)
1. 修改行内样式
通过修改html标签属性中的style来达到修改元素样式的目的
Element.style.display = 'none'
Element.style.backgroundColor = 'red'
Element.style.transform = 'translate(' + number+ 'px)'
注意:
a.backgroundColor关于背景的写法,去掉-并且后面的后缀描述首字母大写
b.width,height,translate()记住后面都要带 ‘px’ 字符串否则不生效
c.
2. 添加层叠样式表
通过classList进行操作(类名是字符串使用)
Element.classList.add("类名") //添加
Element.classList.remove("类名") //删除
Element.classList.contains("类名") //判断是否存在(存在true,不存在false)
3.大小写转换
toUpperCase 转大写
toLocaleUpperCase 按本地方法转大写
toLowerCase 转小写
toLocaleLowerCase 按本地方法转小写
nodeName获取的是元素名称的大写字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<li class="p1">li</li>
<ul class="p2">Ul</ul>
<script>
var p1 = document.querySelector('.p1').nodeName
var p2 = document.querySelector('.p2').nodeName
console.log(p2);
var p3 = p2.toLowerCase()
console.log(p3)
var p4 = p3.toUpperCase()
console.log(p4)
</script>
</body>
</html>