JavaScript—className 属性

最新推荐文章于 2024-01-03 11:51:14 发布

大多山

最新推荐文章于 2024-01-03 11:51:14 发布

阅读量1.6k

点赞数

分类专栏： JavaScript 文章标签： javascript class

本文链接：https://blog.csdn.net/qq_36295256/article/details/76269173

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

定义和用法

　　className 属性设置或返回元素的 class 属性。

语法

object.className=classname

实例

　　本例展示了两种获得元素的 class 属性的方法：

<html>
<body id="myid" class="mystyle">

<script type="text/javascript">
x=document.getElementsByTagName('body')[0];
document.write("Body CSS class: " + x.className);
document.write("<br />");
document.write("An alternate way: ");
document.write(document.getElementById('myid').className);
</script>

</body>
</html>

输出：

Body CSS class: mystyle
An alternate way: mystyle

　　通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式，你就不得不花时间去研究JavaScript函数,去寻找对应修改和设置样式的有关语句。而且每添加或修改js脚本的代码量远大于我们修改css样式的代码量。

　　所以与其使用DOM直接改变某个元素的样式,不如通过JavaScript代码去更新这个元素的class属性。

　　下面通过代码来比较这两种方式的差别:

①通过style改变样式

function setStyleHeaderSiblings() {
    if (!checkCompatibility()) return; //check compatibility
    var heads = document.getElementsByTagName("h1");
    var ele;  //defines a element for receive;
    for (var i = 0; i < heads.length; i++) {
        ele = getNextElement(heads[i].nextSibling);
        ele.style.fontWeight = "bold";
        ele.style.fontSize = "1.2em";
    }
}

②通过className来更新class属性

function setStyleHeaderSiblings() {
    if (!checkCompatibility()) return; //check compatibility
    var heads = document.getElementsByTagName("h1");
    var ele;  //defines a element for receive;
    for (var i = 0; i < heads.length; i++) {
        ele = getNextElement(heads[i].nextSibling);
        ele.className="change";
    }

　　css样式表：

.change{
font-weight:bold;
font-size:1.2em;
}

　　假设我们这个需要给这个效果加上一个background-color:blue;

上面第一种方法需要在js里面加如下代码:

ele.style.backgroundColor="blue";

　　而第二种做法则只要在样式表里加一个样式就可以实现,而且实现了样式与行为的分离,还减少了我们的代码量,所以在后期需求不确定的情况下,我建议第二种方法来动态的修改元素的样式。

　　但是通过className设置元素的样式也有一个缺陷,那就是通过className设置元素的class属性时将替换(而不是追加)该元素原有的class属性,在实际开发中往往很多时候我们需要追加class；

　　所以根据这个需要我们可以自定义一个方法来实现追加className的效果代码如下:

function addClass(element,value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName += " "; //这句代码追加的类名分开
        newClassName += value;
        element.className = newClassName;
    }
}

大多山

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript—className 属性

定义和用法　　className 属性设置或返回元素的 class 属性。语法object.className=classname 实例　　本例展示了两种获得元素的 class 属性的方法：<html><body id="myid" class="mystyle"><script type="text/javascript">x=document.getElementsByT
复制链接

扫一扫