你好,欢迎访问我的博客!登录 评论排行榜 领券购物 免责声明 投稿本站 本站主题
当前位置:首页 - 笔记 - JS/JQ - 正文 代码,改变世界!

javascript中ClassName属性的详解与实例

2018-01-16JS/JQ墨初286°c
A+ A-

在javascritp中,我们可以通过style属性可以控制元素的样式,从而实现行为层通过DOM的style属性去干预显示层显示的目标,但是这种方法是不好的,而且为了实现通过DOM脚本设置的样式,你不得不花时间去研究javascrip函数,去寻找对应修改和设置样式的有关语句。而且每次修改和添加JS脚本的工作量远远大于我们修改CSS属性的量。

与其使用DOM修改元素样式,不如使用函数去更新他的CLASS属性来的实在一些。

ClassName属性

ClassName属性可以获取或写入指定元素的Class属性。

ClassName属性

语法:

element.className

获取一指定元素的class属性,并写入一个新值

HTML代码:

<!DOCTYPE html>
    <head>
    </head>
    <body>
    <div id=“mochu” class="m">
    ........
    </div>
    </body>
</html>

javascript代码

var element = document.getElementById("mochu");
var classs = element.className;//获取它的CLASS属性
element.className = newclass;//替换一个新的CALSS属性

例:

还有上面的HTML代码,向元素内加入一个新的CLASS属性

ClassName属性

javascript代码

var element = document.getElementById("mochu");
var classs = element.className;//获取它的CLASS属性
classs += '';//加入一个空格
classs += newclass;//加入一个新的class属性
element.className = classs;//替换一个新的CALSS属性

这里需要注意的时,className属性,不能以新增加的方法写入class属性,必须获取老属性,然后合成字符串形式再写入!

setAttribute属性

我们也可以利用javascript中提供的setAttribute属性,写入class属性,以及其属性值

这里不再多说,可以参考我以前的文章。

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
javascript中ClassName属性的详解与实例

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
未定义标签

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


  用户登录