用原生javascript为元素添加class(以及setAtt方法)

使用jq添加/删除类名很简单

$('.classname').addClass( 'class1 class2' );
$('.classname').removeClass( 'class1 class2' );

但用原生的js(不引入jq),则需要如下方法:
支持 classList 的高级浏览器(IE10+,Chrome,Firefox,Safari)

document.getElementById('id').classList.add( 'class1', 'class2' );
document.getElementById('id').classList.remove( 'class1', 'class2' );

不支持 classList 的浏览器只能通过 className 来添加

document.getElementById('id').className += ' class1 class2'
//注意 class1前有空格

另增一个setAttribute() 方法

document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

上述代码直接把input 的type类型修改成了button.
语法
element.setAttribute(attributename,attributevalue)
参数 类型 描述
attributename String 必需。您希望添加的属性的名称。
attributevalue String 必需。您希望添加的属性值。

无返回值。
需注意 Internet Explorer 8 以及更早的版本不支持此方法

发表新评论
Gravatar图片显示区