How to add and remove CSS classes to elements using jQuery?-CSS Tutorial-php.cn

How to add and remove CSS classes to elements using jQuery?

WBOY

Release： 2023-08-28 11:41:11

forward

1280 people have browsed it

如何使用 jQuery 添加和删除 CSS 类到元素？

CSS classes play a key role in web design and have a significant impact on the overall appearance of a web page. Since page aesthetics are increasingly valued, dynamic customization of web pages can greatly increase their value. This task may seem daunting at first, but jQuery makes it effortless to attach or extract CSS classes from HTML components on the fly, providing a quick and easy way to generate interactive, dynamic web pages. By attaching or eliminating CSS classes, we can improve the customization and user-friendliness of web pages by modifying the presentation of components on-the-fly based on user actions or page occurrences.

addClass() method

The built-in jQuery method addClass() is used to provide new attributes for each selected element. Additionally, it can be used to modify the properties of the selected element.

grammar

$('selector').addClass(className);

Copy after login

removeClass() method

JQuery provides a built-in function called removeClass(), which can be used to remove one or more class names from a specified element.

grammar

$(selector).removeClass(className, function(index, currentClassName))

Copy after login

method

We will utilize the addClass() and removeClass() methods discussed above to add and remove CSS classes to elements respectively.

The above code is divided into three components: HTML page, CSS style sheet and finally jQuery script. Let’s dive into all three one by one.

HTML page consists of three components -

tag, which will act as the element on which we will add or remove classes.
"Add CSS Class" tag button, we will use this to add a CSS class to the element
"Remove CSS Classes" tag button, we will use it to remove CSS classes from elements.

Now coming to the CSS part, we use CSS to style the CSS called “p-style” which has some specific properties such as background color, padding, margin, color and text alignment. We will use jQuery to dynamically add and remove this class from HTML elements.

Finally, we developed the basic principles for attaching and undoing CSS classes in scripts. To achieve versatility in this task, we use the previously mentioned addClass() and removeClass() functions. We implemented the addClass() function to dynamically attach the "p-style" class to the paragraph element. Instead, we implemented the removeClass() function to dynamically remove the "p-style" class from the paragraph element. Looking closely at the code, we can see that we have integrated the use of these functions into the click events of the "Add CSS Class" and "Remove CSS Class" buttons respectively.

Example

Here is the complete code we will use in this example -

<!DOCTYPE html>
<html>
<head>
   <title>How to add and remove CSS classes to an element using jQuery?</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <style>
      .p-style{
         background-color: black;
         padding: 3px;
         margin: 2px;
         color: white;
         text-align: center;
      }
   </style>
</head>
<body>
   <h4>How to add and remove CSS classes to an element using jQuery?</h4>
   <div>
      <p>This is some text.</p>
   </div>
   <br/>
   <div>
      <button id="add-class">Add CSS Class</button>
      <button id="remove-class">Remove CSS Class</button> 
   </div>
   <script>
      $(document).ready(function(){
         $('#add-class').click(function(){
            $('p').addClass('p-style');
         })
         $('#remove-class').click(function(){
            $('p').removeClass('p-style');
         })
      })
   </script>
</body>
</html>

Copy after login

Output

File output css class.gif will be inserted here.

in conclusion

As a corollary, the functionality and aesthetics of a web page can be greatly enhanced by the ability to dynamically attach or detach CSS categories to HTML components using jQuery. The implementation of this scripting language enables web designers to formulate interactive and visually appealing web page layouts, thereby improving user experience. Additionally, jQuery's versatile and elastic nature makes it a valuable tool in any web development enterprise, and its efficient handling of DOM manipulation tasks relieves developers of time and labor. Essentially, clever use of jQuery to attach or detach CSS categories to HTML elements is a simple but effective way to achieve a sophisticated and sophisticated web page look.

The above is the detailed content of How to add and remove CSS classes to elements using jQuery?. For more information, please follow other related articles on the PHP Chinese website!