Scribd Logo
Upload

Welcome to Scribd!

  • Networking 3

    Uploaded by

    divyagore
    9 views13 pages
    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.

    Original Description:

    RDT

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    9 views13 pages

    Networking 3

    Uploaded by

    divyagore
    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.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 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