console 命令行工具 X clear

console

/**
* 给元素添加一个样式类名
*	ele为要添加类名的元素
* name为要添加的类名
**/
function addClass(ele,name){
  //ele中是否含有name，有则不添加，没有才添加
  if(!hasClass(ele,name)){
      ele.className += ' ' + name
  }
}

/**
*判断一个元素是否有该样式类名
**/

// function hasClass(ele,name){
//   var classArr = ele.className.split(' '),
//       length = classArr.length
  
//   for(var i = 0 ; i < length; i++){
//     if(classArr[i] === name){
//       return true
//     }
//   }
  
//   return false
// }


/**
*判断一个元素是否有该样式类名
**/
function hasClass(ele,name){
 	var reg = new RegExp("\\b" + name + "\\b")
  return reg.test(ele.className)
}

/**
* 删除一个元素中的样式类名
**/
function removeClass(ele,name){
  var reg = new RegExp("\\b" + name + "\\b")
  return ele.className.replace(reg,'')
}


/**
* 切换元素中的样式类名,
* 如果元素中具有该类则删除
* 如果元素中没有该类则添加
**/
function toggleClass(ele,name){
  if(hasClass(ele,name)){
    removeClass(ele,name)
  }else{
    addClass(ele,name)
  }
}


















var oDiv = document.getElementById('demo')

console.log(hasClass(oDiv,'d2'))

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>封装js基础类样式操作</title>
</head>
<body>
  
  <div id="demo" class="d1 d2"></div>
  
</body>
</html>