className
在JS中,我们可以通过 元素名.className 来获取和设置类名。但是,当className中类名较多,
我们需要删除其中一个类名时,就需要先将获取到的类名字符串通过空格转成数组,然后用indexOf判断
类名的索引值,最后通过splice方法删除
例: 点击删除div中box的class名
<body>
<div class="a b c box d e f">
</div>
<button>点击</button>
<script>
var divEle = document.querySelector("div");
var btnEle = document.querySelector("button");
btnEle.onclick = function () {
var str = divEle.className ;
divEle.className = delEle( str , 'box' );
console.log(divEle);
}
console.log(divEle);
function delEle ( str , e ){
var arr = str.split(" ");
var a = arr.indexOf(e);
arr.splice(a,1);
var strA = arr.join(" ");
return strA ;
}
</script>
</body>
这里我们封装了一个方法,传入了获取到的divEle元素className的值,然后将字符串和要删除的属性值放到方法中,返回的是删除了该属性值之后的字符串,最后将这个字符串重复赋值给divEle元素className。这种做法比较麻烦。
H5提供给我们的方法
在H5中,元素身上有一个叫做classList的属性,里面包含了元素身上所有的类名,以下就是classList提供的方法操作类名
1.add(); 添加类名
语法: 元素名.classList.add("需要添加的类名");
例: divEle.classList.add("box"); //在div元素中将box属性值添加到class类名中
2.remove(); 移除类名
语法: 元素名.classList.remove("box");
例: divEle.classList.remove("box"); //在div元素中将box值属性从class类中移除
3.toggle(); 切换类名
语法: 元素名.classList.toggle("要切换的类名");
--注-- 当元素有这个类名的时候,就做删除操作;
当元素没有这个类名的时候,就做添加操作
例1:用toggle实现简单的灯泡效果 点击页面,亮,再点击就熄灭。
<head>
<title>Document</title>
<style>
div {
margin: 10px auto;
width: 400px;
height: 400px;
border-radius: 50%;
background-color: #ccc;
}
.display {
background-color: coral;
}
</style>
</head>
<body>
<div>
</div>
<script>
var divEle = document.querySelector("div");
document.onclick = function () {
divEle.classList.toggle("display");
}
</script>
</body>
例2.实现简单联动效果 可用js来实现简单的hover效果
<head>
<style>
div {
width: 100%;
height: 100px;
background-color: cyan;
color: red;
position: absolute;
top: -100px;
left: 0px;
transition: top 0.5s linear;
}
.display {
top: 0px;
}
button {
margin: 100px;
}
</style>
</head>
<body>
<div class="display">
我是p标签
</div>
<div></div>
<div></div>
<button>
按钮
</button>
<script>
var divEles = document.getElementsByTagName("div")[0];
var divEle = document.querySelector("div");
var divEles2 = document.querySelectorAll("div")[0];
var btnEle = document.querySelector("button");
btnEle.onmouseenter = function () {
divEle.classList.toggle("display");
}
btnEle.onmouseleave = function () {
divEle.classList.toggle("display");
}
</script>
</body>