jQuery里封装的有addClass函数，调用十分方便，那么用JS如何实现呢，下面我们来介绍下。
首先是CSS部分
写一个新的class用来添加
HTML部分
一个没有样式的div
script部分
声明addClass函数，把标签元素和新的class作为参数传进去，进行判断，如果标签元素原来有样式，那么就增加一个样式，如果没有样式，那么就把标签元素的样式设为传进来的样式。
调用函数，这样就实现了样式的添加。
更多前端内容 请 点击关注 点击关注
<!DOCTYPE html><html>
<head>
<title>测试页面2</title>
<meta charset="UTF-8"/>
<style>
.tdiv{
border:2px solid
}
</style>
<script>
function test(ele){
var pDiv=ele.parentNode
if(pDiv.className==" "){
pDiv.className="tdiv"
}else{
pDiv.className=" "
}
}
//还可以用classList，这种方法更流畅
function test2(ele){
var pDiv=ele.parentNode
if(pDiv.classList.contains("tdiv")){
pDiv.classList.remove("tdiv")
}else{
pDiv.classList.add("tdiv")
}
}
</script>
</head>
<body>
<div>
<a onclick="test(this)">测试</a>
</div>
</body>
</html>
// dom 元素处理// 获取dom属性
function getAttr( attr )
{
return this.getAttribute( attr )
}
// 设置属性
function setAttr( attr, val )
{
this.setAttribute( attr, val )
return this
}
// 编辑元素class
function editClass( mode, data )
{
var cls = getAttr.call( this, "class" ) || ''
var arr = cls.split( /\s+/ )
switch( mode )
{
case "add":
return setAttr.call( this, "class", cls + " " + data )
break
case "remove":
for( var i = 0 i < arr.length i++ )
{
if( arr[ i ] == data )
{
arr.splice( i, 1 )
}
}
var cls = arr.join( " " )
cls = cls.replace( /^\s|\s$/g, "" )
// cls = cls == "" ? null : cls
return setAttr.call( this, "class", cls )
break
default:
console.log( "EditClass mode error!" )
return this
break
}
}
// 添加class
function addClass( cls )
{
return editClass.call( this, "add", cls )
}
// 删除class
function removeClass( cls )
{
return editClass.call( this, "remove", cls )
}
// 我写的这个调用起来和普通的调用方式不一样， 需要用call
// 比如
dom = document.getElementById('domid')
addClass.call(dom, 'newclass') // 给dom添加名为‘newclass’的classname
至于toggle没用过，不清楚是什么效果， 不过我想结合add和remove应该已经能做出所有效果了
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）