jQuery DOM操作（css类）

最新推荐文章于 2026-07-01 20:04:56 发布

原创最新推荐文章于 2026-07-01 20:04:56 发布 · 957 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端笔记

html代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>DOM操作CSS类</title>
       <script src="js/jquery-3.7.1.js"></script>
       <style>
           body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f9;
           flex-direction: column;
}

.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}

h1 {
margin-bottom: 20px;
}

button {
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 5px;
background-color: #007BFF;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #0056b3;
}

.highlight {
background-color: pink;
}

.large {
font-size: 24px;
}
       </style>
   </head>
   <body>
       <div class="container">
           <h1 id="title">吼吼哈嘿</h1>
           <div>
               <button id="add-class">添加类</button>
               <button id="remove-class">移除类</button>
               <button id="toggle-class">切换类</button>
               <button id="change-css">设置</button>
           </div>
       </div>
       <script>
           //add-class
           $("#add-class").click(function(){
               $("#title").addClass("highlight large");
           });
           $("#remove-class").click(function(){
               $("#title").removeClass("highlight large");
           });
           $("#toggle-class").click(function(){
               $("#title").toggleClass("highlight large");
           });
           $("#change-css").click(function(){
               $("#title").css({
                   "color":"pink",
                   "font-weight":"bold"
               });
           });
       </script>
   </body>
</html>