jQuery-CSS classes and methods

jQuery - Get and set CSS classes

jQuery Manipulating CSS

jQuery Has several methods for performing CSS operations. We will study the following:

addClass() - Add one or more classes to the selected element

removeClass() - Remove one or more classes from the selected element

toggleClass() - Add/delete class switching operation for the selected element

css() - Set or return the style attribute

Instance style sheet

The following The style sheet will be used for all examples on this page:

.important{
font-weight:bold;
font-size:xx-large;
}.
blue{
color:blue;
}

jQuery addClass() method

The following examples show how to add the class attribute to different elements. Of course, when adding a class, you can also select multiple elements:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1>静夜思</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button>
</body>
</html>

You can also specify multiple classes in the addClass() method:

<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").addClass("important blue");
  });
});
</script>
<style type="text/css">
.important
{
    font-weight:bold;
    font-size:xx-large;
}
.blue
{
    color:blue;
}
</style>
</head>
<body>
<div id="div1">我会变哦</div>
<div id="div2">为什么我不行呢</div>
<br>
<button>为第一个 div 元素添加类</button>
</body>
</html>

jQuery removeClass() Method

The following example demonstrates how to delete the specified class attribute in different elements:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").removeClass("blue");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1>静夜思</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>从元素中移除 class</button>
</body>
</html>

The effect of addclass is exactly the opposite.

jQuery toggleClass() method

Attribute switching function:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").toggleClass("blue");
  });
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>切换 class</button>
</body>
</html>

jQuery css() method

css() method setting Or returns one or more style properties of the selected element.

Return CSS properties

To return the value of the specified CSS property, please use the following syntax:

css("propertyname");

Set CSS properties

To set the specified CSS properties, please use the following syntax:

css("propertyname","value");

Set multiple CSS properties

If you need to set multiple CSS properties, please use the following syntax:

css({"propertyname":" value","propertyname":"value",...});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
  });
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个例子</p>
<p style="background-color:#00ff00">这是一个例子</p>
<p style="background-color:#0000ff">这是一个例子</p>
<p>这是一个例子</p>
<button>为 p 元素设置多个样式</button>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").css("background-color","yellow"); }); }); </script> </head> <body> <h2>这是一个标题</h2> <p style="background-color:#ff0000">我们是例子</p> <p style="background-color:#00ff00">我们是例子</p> <p style="background-color:#0000ff">我们是例子</p> <p>我们是例子</p> <button>设置 p 元素的 background-color </button> </body> </html>

submit Reset Code

Automatic operation

jQuery-CSS classes and methods

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]