使用Javascript判断元素中是否含有某个样式
tip：引入了Moment.js格式化前端页面显示时间
假设我们有如下元素
<div id="LL" class="a b hello-world">div>1.简单正则匹配法
即使用正则判断单词边界的方式判断是否存在className
function hasClass(element,className){
const regExp = new RegExp("\\b" + className + "\\b","gi");
return regExp.test(element.className);
}
const LL = document.getElementById('LL');
console.log(hasClass(LL,'a')); //..true
console.log(hasClass(LL,'b')); //..true
console.log(hasClass(LL,'hello-world')); //..true
console.log(hasClass(LL,'hello')); //..true
console.log(hasClass(LL,'world')); //..true在样式的名字为hello-world之类的带有-连接符的情况，测试hello和world都会返回true，这并不满足我们的预期。
2.IndexOf方法
也会导致这样的问题
function hasClass(element,className){
return element.className.indexOf(className) > -1;
}
const LL = document.getElementById('LL');
console.log(hasClass(LL,'a')); //..true
console.log(hasClass(LL,'b')); //..true
console.log(hasClass(LL,'hello-world')); //..true
console.log(hasClass(LL,'hello')); //..true
console.log(hasClass(LL,'world')); //..true
console.log(hasClass(LL,'h')); //..true
console.log(hasClass(LL,'e')); //..true
console.log(hasClass(LL,'l')); //..true这时候，不仅hello和world返回true，h/e/l/等单个字符都会返回true
我们改进一下方法：
function hasClass(element,className){
return (" "+element.className + " ").indexOf(" " + className + " ") > -1;
}
const LL = document.getElementById('LL');
console.log(hasClass(LL,'a')); //..true
console.log(hasClass(LL,'b')); //..true
console.log(hasClass(LL,'hello-world')); //..true
console.log(hasClass(LL,'hello')); //..false
console.log(hasClass(LL,'world')); //..false
console.log(hasClass(LL,'h')); //..false
console.log(hasClass(LL,'e')); //..false
console.log(hasClass(LL,'l')); //..false现在根据样式名称加” “的方式，判断一个元素是否含有该样式。在大部分的测试中，已经没有了问题。
但是！！！我们遇到这样的神奇代码
<div id="LL" class="a b hello-world">div>思路：根据className匹配元素数组，然后查找其中是否含有对应的元素
<div id="LL" class="a b hello-world">div>
<script>
function hasClass(element,className){
var aSameClassEle = document.getElementsByClassName(className);
for(var i = 0;i < aSameClassEle.length;i++){
if(aSameClassEle[i] === element){
return true;
}
}
return false;
}
let obj = document.getElementById("LL");
console.log(hasClass(obj,'a')); //..true
console.log(hasClass(obj,'c')); //..false
script>