如何使用 JavaScript 更改元素的类？-js教程-PHP中文网

如何使用 JavaScript 更改元素的类？

PHPz

发布： 2023-08-30 14:29:04

转载

1502人浏览过

如何使用 javascript 更改元素的类？

className 属性用于更改元素的类。在这里，我们将看到两个例子 -

如何使用 className 属性更改元素的类。
如何在新旧课程之间切换。

使用 className 属性更改元素的类

在此示例中，我们将使用 className 属性更改元素的类。假设我们有一个带有 oldStyle 类的 div -

<div id="mydiv" class="oldStyle">
   <p>The div...</p>
</div>

登录后复制

我们将使用 className 属性将上面的 oldStyle 类设置为一个新类，即 newStyle -

立即学习“Java免费学习笔记（深入）”；

function demoFunction() {
   document.getElementById("mydiv").className = "newStyle";
}

登录后复制

我们通过单击以下按钮调用 demoFunction() 实现了上述目标 -

<p>Click the below button to change the class</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10131">
                            <img src="https://img.php.cn/upload/webcode/000/000/004/176088420393879.jpg" alt="瑞克商易仿淘宝多用户商城">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10131">瑞克商易仿淘宝多用户商城</a>
                            <p>v4.5更新说明：修改店铺自定义分类为一级重新整合bbsxp论坛，修正了一致的所有错误。如分页，搜索，通行密码，选项等错误修改添加会员认证功能。认证后可以再次升级认证.增加虚拟币使用功能。可使用虚拟币购买收费店铺时间，站长可以在后台控制价格。订单管理中添加付款连接，使买家下订单后可以选择是否马上付款。增加首页两侧广告条增加在后台可以更改9大主题的名称增加修改后台的求购管理增加会员申请收费店铺及收费</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="瑞克商易仿淘宝多用户商城">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10131" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="瑞克商易仿淘宝多用户商城">
                        </a>
                    </div>
                
<button onclick="demoFunction()">Change Class</button>

登录后复制

示例

让我们看看完整的例子 -

<!DOCTYPE html>
<html>
<style>
   .oldStyle {
      background-color: yellow;
      padding: 5px;
      border: 2px solid orange;
      font-size: 15px;
   }
   .newStyle {
      background-color: green;
      text-align: center;
      font-size: 25px;
      padding: 7px;
   }
</style>
<body>
   <h1>Changing the class</h1>
   <p>Click the below button to change the class</p>
   <button onclick="demoFunction()">Change Class</button>
   <div id="mydiv" class="oldStyle">
      <p>The div...</p>
   </div>
   <script>
      function demoFunction() {
         document.getElementById("mydiv").className = "newStyle";
      }
   </script>
</body>
</html>

登录后复制

在新旧类之间切换

示例

我们还可以创建一个适用于两种方式的按钮，即切换。再次单击按钮会将其切换回来 -

<!DOCTYPE html>
<html>
<style>
   .oldStyle {
      background-color: yellow;
      padding: 5px;
      border: 2px solid orange;
      font-size: 15px;
   }
   .newStyle {
      background-color: green;
      text-align: center;
      font-size: 25px;
      padding: 7px;
   }
</style>
<body>
   <h1>Toggle the class</h1>
   <p>Click the below button to toggle the classes</p>
   <button onclick="demoFunction()">Toggle Class</button>
   <div id="mydiv" class="oldStyle">
      <p>The div...</p>
   </div>
   <script>
      function demoFunction() {
         const element = document.getElementById("mydiv");
         if (element.className == "oldStyle") {
            element.className = "newStyle";
         } else {
            element.className = "oldStyle";
         }
      }
   </script>
</body>
</html>

登录后复制

以上就是如何使用 JavaScript 更改元素的类？的详细内容，更多请关注php中文网其它相关文章！