HTML5基础加强css样式篇（DOM的属性操作（对class属性值的操作 setAttribute,removeAttribute,classlist：remove，add,toggle））（七）
1.通用的 setAttribute,removeAttribute：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5初级阶段</title>
<style type="text/css">
.box {
color: red;
font-size: 20px;
background-color: green;
}
.box1 {
border: 2px solid pink;
}
</style>
</head>
<body>
<div id="box">
Hello
</div>
<button type="button" id="btnAdd">添加样式</button>
<button type="button" id="btnDel">删除样式</button>
<button type="button" id="btnAddBoder">添加边框样式</button>
<script type="text/javascript">
// Add your code
// 通过JS操作元素的属性
var boxDom = document.querySelector("#box");
var btnAddDom = document.querySelector("#btnAdd");
// 单击按钮动态添加 class 属性
btnAddDom.onclick = function () {
boxDom.setAttribute("class", "box");
}
var btnDelDom = document.querySelector("#btnDel");
// 单击按钮动态删除 class 属性
btnDelDom.onclick = function () {
boxDom.removeAttribute("class");
}
var btnAddBoderDom = document.querySelector("#btnAddBoder");
btnAddBoderDom.onclick = function () {
// 获取属性现有值
var attrVal = boxDom.getAttribute("class")
boxDom.setAttribute("class", attrVal + " box1");
}
</script>
</body>
</html>
2.HTMLT5特有的classList remove,add类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5初级阶段</title>
<style type="text/css">
.box {
color: red;
font-size: 20px;
background-color: green;
}
.box1 {
border: 2px solid pink;
}
</style>
</head>
<body>
<div id="box">
Hello
</div>
<button type="button" id="btnAdd">添加样式</button>
<button type="button" id="btnDel">删除样式</button>
<button type="button" id="btnAddBoder">添加边框样式</button>
<script type="text/javascript">
// Add your code
// 通过JS操作元素的属性
var boxDom = document.querySelector("#box");
var btnAddDom = document.querySelector("#btnAdd");
// 单击按钮动态添加 class 属性
btnAddDom.onclick = function () {
boxDom.setAttribute("class", "box");
}
var btnDelDom = document.querySelector("#btnDel");
// 单击按钮动态删除 class 属性
btnDelDom.onclick = function () {
// boxDom.removeAttribute("class");
// 为一个DOM动态“删除”一个类
boxDom.classList.remove("box1");
}
var btnAddBoderDom = document.querySelector("#btnAddBoder");
btnAddBoderDom.onclick = function () {
// 获取属性现有值
// var attrVal = boxDom.getAttribute("class")
// boxDom.setAttribute("class", attrVal + " box1");
/*
classList 是HTML5为DOM提供的一个操作 class 属性的对象
*/
// 为一个DOM动态“追加”一个类
boxDom.classList.add("box1");
// class 属性中 类选择器的个数
console.log( boxDom.classList.length);
}
</script>
</body>
</html>
3classList的方法toggle()方法可以检测是否含有，有就删除没有就添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5初级阶段</title>
<style type="text/css">
.box-hidden{
visibility: hidden;
}
</style>
</head>
<body>
<div id="box" class="test">
Hello
</div>
<button type="button" id="btnToggle">隐藏/显示</button>
<script type="text/javascript">
var boxDom = document.querySelector("#box");
var btnAddDom = document.querySelector("#btnToggle");
var isHidden = false;
/*
单击按钮
1 box 显示，隐藏
2 box 已经隐藏，需要显示
*/
btnAddDom.onclick = function () {
/*
if(isHidden == false){
boxDom.setAttribute("class", "box-hidden");
isHidden = true;
}else{
boxDom.removeAttribute("class", "box-hidden");
isHidden = false;
}
*/
boxDom.classList.toggle("box-hidden");
}
</script>
</body>
</html>
声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
