0 votes
419 views
in jQuery by

How do you add and remove CSS classes to html element by using jQuery?

3 Answers

0 votes
by (4.4k points)

jQuery provides several methods for CSS manipulation:-

  • addClass():- addClass() method adds one or more classes to selected elements
  • removeClass():- removeClass() method femoves one or more classes from selected elements
  • toggleClass():- toggleClass() method toggles between adding/removing classes from selected elements
  • css():- css() method sets or returns the style attribute
0 votes
by (4.4k points)

See the following code for adding and removing css class from html element by using jQuery:-

<html>
<head>
    <title>jQuery Add/Remove css</title>
    <style type="text/css">
      .highlight {
        background:green;
      }
    </style>
    <script type="text/javascript" language="javascript" src="../scripts/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready ( function(){
            $("#addCssLnk").click(function (){
                $('#p1').addClass('highlight');
            });
            $("#removeCssLnk").click(function (){
                $('#p1').removeClass('highlight');
            });
        });
    </script>
</head>
<body>
    <h1>Add/Remove css</h1>
    <p id="p1">Welcome to jQuery</p>
    <a href="javascript: void(0);" id="addCssLnk">Add Css</a>&nbsp;&nbsp;
    <a href="javascript: void(0);" id="removeCssLnk">Remove Css</a>
</body>
</html>

0 votes
by (4.4k points)

Download running example for adding and removing css class to html: Click Here for Downloading

Share:- Whatsapp Facebook Facebook


Welcome to Developerhelpway Q&A, where you can ask questions and receive answers from other members of the community.

Categories

...