js获取classname后修改属性（js根据classname获取元素）

发布时间：2023-12-08

js获取classname后修改属性（js根据classname获取元素）

更新：<time datetime="2022-11-16 01:09">2022-11-16 01:09</time>

本文目录一览：

1、[js 怎么通过class改变样式](#js 怎么通过class改变样式)
2、js和jq怎么修改className然后怎么能对其className操作
3、js获取ClassName后，怎样设置元素宽度
4、现在自学JavaScript，发现无法用JS改变ID里面的className的属性，求大神教教我！
5、如何使用JavaScript的className属性改变网页的样式？

js 怎么通过class改变样式

js通过class改变样式，可以使用Dom的className属性设置元素的样式。完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试页面</title>
    <style type="text/css">
        .themeCls {
            color: #000;
            background-color: #f60;
            line-height: 25px;
        }
    </style>
</head>
<body style="background-color:#ccc;">
    <span id="theme">这是一段测试文本<br />用来测试js通过class改变样式</span>
    <script type="text/javascript">
        var domTheme = document.getElementById("theme");
        domTheme.className = "themeCls";
    </script>
</body>
</html>

具体操作步骤如下：

  1. 新建一个html文件，命名为t.html。
  2. 打开t.html。
  3. 在t.html中写入html结构代码，其中设置需要添加class类的元素的ID为“theme”。代码如下：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试页面</title>
</head>
<body style="background-color:#ccc;">
    <span id="theme">这是一段测试文本<br />用来测试js通过class改变样式</span>
</body>
</html>
  1. 设置一个css类，命名为“themeCls”，用于在javascript操作时给元素添加class。“themeCls”类为了方便观察效果，设置css规则为字体颜色为黑色#000，背景为橙色#f60，行高为25像素。代码如下：
.themeCls {
    color: #000;
    background-color: #f60;
    line-height: 25px;
}
  1. 编写javascript代码，获取ID为“theme”的元素并设置元素的class类为“themeCls”，代码如下：
var domTheme = document.getElementById("theme");
domTheme.className = "themeCls";
  1. 打开浏览器，浏览t.html页面，发现页面中“这是一段测试文本用来测试js通过class改变样式”这一段文本字体颜色呈现黑色，背景呈现橙色，说明我们为元素添加class类“themeCls”成功了。

js和jq怎么修改className然后怎么能对其className操作

js修改class的几种方法：

var div = document.getElementById('div');
// 方法一
div.setAttribute('class', 'style1 style2');
// 方法二
div.className = 'style1 style2';

jQuery修改Class的方法：

$('#div').attr('class','style5 style6');

js获取ClassName后，怎样设置元素宽度

并没有getElementByClassName()这个函数，只有getElementsByClassName()，Element后面有个s，这个返回来是多个节点的集合（因为class名有可能匹配到多个），假设只有1个元素用这个class名，那么要改变宽度可以：

var a = document.getElementsByClassName("a");
a[0].style.width = "500px";

望采纳，谢谢。

现在自学JavaScript，发现无法用JS改变ID里面的className的属性，求大神教教我！

首先你这段代码中是存在问题的：使用getElementsByClassName来获取元素，得到的是记录集，需要使用循环或者指定的位置如[0]来操作。 其次，你是想知道JavaScript改变id里面的指定class的样式。最近的方式如下： 将里面的name为ts的div绑定id，然后获取该id指定id的classname的方式来改变class样式，代码如下：

document.getElementById("tsid").className = "tss";

如何使用JavaScript的className属性改变网页的样式？

网页的样式一般都定义在了css的文件中，而JavaScript中的className的属性能让css中的样式动态的应用到网页的元素上。比如，在css中有样式.example。代码如下：

.example {
    color: #fff;
    font-size: 1em;
    text-align: right;
}

要用JavaScript动态的应用到网页上，可以使用如下类似的代码：

function preparePage() {
    // 当mainContent元素被点击，mainContent的样式将会改变
    document.getElementById("mainContent").onclick = function() {
        // 检查当前mainContent的样式，若是example，则将样式取消。
        // 取消样式直接将className属性赋值为空字符串""就行。
        // 若mainContent的样式不是example，则应用example样式。
        if(document.getElementById("mainContent").className == "example") {
            document.getElementById("mainContent").className = "";
        } else {
            document.getElementById("mainContent").className = "example";
        }
    };
}
window.onload = function() {
    preparePage();
}

通过上面的JavaScript代码，我们可以通过点击来控制mainContent元素的样式。上面的代码是从秒秒学上扣出来的，如果你想要完整的案例，可以在秒秒学的《使用JavaScript美化界面》一章中找到。

推荐文章