(1)使用原生js封装一个addClass方法,为页面上DOM元素动态添加className
首先要保证新添加的class不会覆盖原来的className
方法一:利用字符串拼接(可以添加一到多个className)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id='ul'></ul>
<script type="text/javascript">
/*
1. 判断是否有DOM元素是否有class属性( 没有则创建并且添加className )
2. 判断DOM元素的class样式中是否已存在要添加的className
3. 将要添加的样式分割为数组,一个一个进行判断
*/
var ul = document.getElementById('ul')
// 封装addClass属性
function addClass (element,new_class) {
if(hasAttr(element)) {
var classArr = element.className.split(' ')
new_class = new_class.split(' ')
if(hasClass(classArr,new_class)) {
new_class.forEach(function (value,index) {
if(classArr.indexOf(value)===-1) {
tmp.push(value)
}
})
} else {
tmp = new_class
}
element.className += ' ' + tmp.join(' ')
} else {
element.setAttribute('class',new_class)
}
}
//1. 判断是否有DOM元素是否有class属性
function hasAttr (element) {
return element.hasAttribute('class')
}
//2. 判断DOM元素的class样式中是否已存在要添加的className
// 不管要添加多少class,都将其转化为数组判断是否与原样式重复
function hasClass(classArr,new_class) {
var flag = false
new_class.forEach(function (value,index) {
if (classArr.indexOf(value)!==-1) {
flag = true
}
})
return flag
}
</script>
</body>
</html>
方法二 :借用正则表达式(如果要添加多个class时不建议使用)
var ul = document.getElementById('ul')
addClass(ul,'112')
function addClass (element,new_class) {
if(hasAttr(element)) {
var oldClass = element.className
if(!hasClass(oldClass,new_class)) {
element.className += ' ' + new_class
}
}
}
//1. 判断是否有DOM元素是否有class属性
function hasAttr (element) {
return element.hasAttribute('class')
}
//2. 判断DOM元素的class样式中是否已存在要添加的className
function hasClass(oldClass,new_class) {
var flag = false
var reg = new RegExp('(^|\\s)'+new_class+'(\\s|$)')
flag = reg.test(oldClass)
return flag
}
(2)封装一个removeClass方法,动态删除页面DOM元素的className
方法一:借助正则表达式
// 与添加class类似
var ul = document.getElementById('ul')
removeClass(ul,'112')
function removeClass (element,remove_class) {
if(hasAttr(element)) {
var oldClass = element.className
if(hasClass(oldClass,remove_class)) {
var oldArr = oldClass.split(' ')
oldArr.splice(oldArr.indexOf(remove_class),1)
element.className = oldArr.join(' ')
}
}
}
//1. 判断是否有DOM元素是否有class属性
function hasAttr (element) {
return element.hasAttribute('class')
}
//2. 判断DOM元素的class样式中是否已存在要添加的className
function hasClass(oldClass,new_class) {
var flag = false
var reg = new RegExp('(^|\\s)'+new_class+'(\\s|$)')
flag = reg.test(oldClass)
return flag
}
方法二:借助数组遍历
var ul = document.getElementById('ul')
// 封装removeClass属性
removeClass(ul,'bbb ccc')
function removeClass (element,remove_class) {
if(hasAttr(element)) {
var classArr = element.className.split(' ')
remove_class = remove_class.split(' ')
if(hasClass(classArr,remove_class)) {
remove_class.forEach(function (value,index) {
if(classArr.indexOf(value)!==-1) {
classArr.splice(classArr.indexOf(value),1)
}
})
}
element.className = classArr.join(' ')
} else{
console.log('该元素没有class属性')
return
}
}
//1. 判断是否有DOM元素是否有class属性
function hasAttr (element) {
return element.hasAttribute('class')
}
//2. 判断DOM元素的class样式中是否已存在要添加的className
// 不管要添加多少class,都将其转化为数组判断是否与原样式重复
function hasClass(classArr,new_class) {
var flag = false
new_class.forEach(function (value,index) {
if (classArr.indexOf(value)!==-1) {
flag = true
}
})
return flag
}
方法三:使用数组相减
var ul = document.getElementById('ul')
// 封装removeClass属性
removeClass(ul,'bbb 1312')
function removeClass (element,remove_class) {
if(hasAttr(element)) {
var classArr = element.className.split(' ')
var remove_class = remove_class.split(' ')
var tmp = []
classArr.forEach((value)=>{
var index = remove_class.findIndex(removeValue=>value == removeValue);
if (index > -1) delete remove_class[index];
else tmp.push(value);
});
console.log(remove_class)
element.className = tmp.join(' ')
} else{
console.log('该元素没有class属性')
return
}
}
//1. 判断是否有DOM元素是否有class属性
function hasAttr (element) {
return element.hasAttribute('class')
}
方法三:利用HTML5的新特性classList
要给元素添加class,首先要清楚此元素的class是否已存在要添加的class,所以需要先获取该元素的class,可以给该原素添加一个id,使用querySelector(id名)得到该元素,然后利用HTML5新增的特性classList 获取到所有的class,其返回值为一个对象,
根据返回值可以发现,在value中存有全部的class,所以先使用 .value得到字符串,再使用 split 方法转化为数组 ,这样就可以很方便地遍历了,遍历的方法很简单,就不说了,如果遍历结果是不存在,则使用add()将它添加进去,反之什么也不做
function addClass() {
const key = document.querySelector(`div[data-key="${UnicodeKey}"]`)
const keyList = key.classList.value.split(' ');
var i;
for(i= 0; i<keyList.length,keyList[i]!=="key";i++) {}
if(i<keyList.length) {
key.classList.remove("key")
} else {
key.classList.add("key")
}
console.log(key.classList)
}