Scribd
Upload
29 views13 pages

Networking 3

This document discusses how to dynamically add CSS classes and styles to elements using jQuery. It provides examples of using the css(), addClass(), removeClass(), and toggleClass() jQuery methods. The css() method is used to set or return CSS properties directly. The addClass(), removeClass(), and toggleClass() methods are used to dynamically add, remove, or toggle CSS classes on elements. Syntax and examples are given for each method.

Uploaded by

divyagore
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
29 views13 pages

Networking 3

This document discusses how to dynamically add CSS classes and styles to elements using jQuery. It provides examples of using the css(), addClass(), removeClass(), and toggleClass() jQuery methods. The css() method is used to set or return CSS properties directly. The addClass(), removeClass(), and toggleClass() methods are used to dynamically add, remove, or toggle CSS classes on elements. Syntax and examples are given for each method.

Uploaded by

divyagore
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Click to edit Master title style

REPRESENTING

DIVYAA GORE
ROLL NO-28
SY BBA(CA)

1
Click to edit Master title style

O P I C - H O W T O I N S E RT E L E M E N T S B Y A D D I N G C S S C L A S S
D Y N A M I C A L LY.

2 2
Click to edit
ADDING Master title
CSS ELEMENT style
DYNAMICALLY:

• In this article, we will see how to add some CSS


 properties dynamically using jQuery. To add CSS
 properties dynamically, we use css() method. The 
css() method is used to change the style property of the
selected element. 
• The css() method can be used in different ways. This
method can also be used to check the present value of
the property for the selected element:

3 3
Click to edit Master title style

Syntax:

$(selector).css(property)

Here we have created two elements inside the body tag i.e. <h1> and <h3>
elements. We apply CSS property on the <body> tag and <h1> tag using
CSS () method dynamically.

Example: In this example, we will add CSS properties to an element using 


jQuery.

4 4
Click to edit Master title style

<!DOCTYpe html>
<html>
<head>
    <title>
       How to add CSS properties to an element dynamically using jQuery?
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

5 5
Click to edit Master title style
 
     <script>
        $(document).ready(function () {
            $("body").css("text-align", "center");
            $("h1").css("color", "green");
       });
    </script>
</head>
<body>
     <h1>GeeksforGeeks</h1>
   <h3>
        How to add CSS properties to an element
       

6 6
Click to edit Master title style
 
  <br>dynamically using jQuery?
    </h3>
</body>
</html>

7 7
ClickMANIPULATION:
CSS to edit Master title style

jQuery has several methods for CSS manipulation. We


will look at the following methods:
addClass() - Adds one or more classes to the selected
elements
removeClass() - Removes one or more classes from the
selected elements
toggleClass() - Toggles between adding/removing
classes from the selected elements
css() - Sets or returns the style attribute
8 8
ClickMANIPULATION:
CSS to edit Master title style

JQuery addClass() Method


The following example shows how to add class
attributes to different elements. Of course you can select
multiple elements, when adding classes:
Example
$("button").click(function(){
  $("h1, h2, p").addClass("blue");
  $("div").addClass("important");
});
9 9
ClickMANIPULATION:
CSS to edit Master title style

jQuery removeClass() Method


The following example shows how to remove a specific
class attribute from different elements:
Example
$("button").click(function(){
  $("h1, h2, p").removeClass("blue");
});

1010
ClickMANIPULATION:
CSS to edit Master title style

jQuery toggleClass() Method


• The following example will show how to use the
jQuery toggleClass() method. This method toggles
between adding/removing classes from the selected
elements:Example
• $("button").click(function(){
• $("h1, h2, p").toggleClass("blue");
• });

1111
ClickMANIPULATION:
CSS to edit Master title style

jQuery css() Method


The css() method sets or returns one or more style
properties for the selected elements.

Example
$("p").css("background-color");

1212
Click to edit Master title style

THANK YOU.

13

You might also like