javascript中ClassName属性的详解与实例

xiaoqihv8个月前 (04-08)前端设计68

在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属性,以及其属性值

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

相关文章

JavaScript中常见获取元素的方法汇总

JavaScript中常见获取元素的方法汇总

网页的制作离不开JavaScript(JS)今天就说说那些关于JavaScript(JS)操作DOM节点的一些属性,做个记录,以备后续查找!getattribute()DOM提供了一个名为getEle...

javascript中的addEventListener()方法

javascript中的addEventListener()方法

我们操作HTML DOM对象的时候,可以利addEventListener()方法为某个被选中的DOM对象添加一个事件,用来操作这个被选中的对象。下面就记录一下,如果利javascript的addEv...

javascript中的innerHTML属性有什么作用

javascript中的innerHTML属性有什么作用

innerHTML在javaScript中具有双向功能,一是可以从指定的元素对象中获取内容,二是可以把自定义内容插入到指定的元素对象中去。定义和用法innerHTML属性用于设置或返回指定标签之间的H...

jQuery获取当前页面的URL信息

在网站时不少客户要求导航条具有高亮功能,如果换到以前肯定是一个页面一个页面的去写代码,那样的话太麻烦,而且还不利于后期的维护和修改。不过现在有了jQuery了可以省去好多的事,再麻烦的事不就是一行JQ...

jQuery中的jQuery.noConflict()函数说明

jQuery中的jQuery.noConflict()函数说明

在jQuery库中,几乎所有的插件都被限制在它的命名空间里,通常全局对象都被很好的储存在jQuery的命名空间里,当jQuery与其它的JavaSscript库使用时不会引起冲突一般情况下jQuery...

JQ获取某个元素下的所有图片并改变其属性

利用JQ获取某个元素下的所有图片并改变其属性...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。