// 获取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应该已经能做出所有效果了
思路为用addClass() 方法变可实现。
jquery中增加class属性步骤:
addClass() 方法：
定义和用法
addClass() 方法向被选元素添加一个或多个类。
该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
<html><head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$('p').addClass(function(n){
return 'par_' + n
})
})
})
</script>
<style type="text/css">
.par_0
{
color:blue
}
.par_1
{
color:red
}
</style>
</head>
效果图：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）