Lesson 17 Manipulating CSS

JQuery can lets you manipulated CSS easily using several methods.

The CSS manipulating methods are addClass(), removeClass(),toggleClass() and css().

17.1 The addclass() Method

The addClass() method adds one or more classes to selected elements .

Example 17.1

In this example, include the following CSS in the heading.

<style>
.change_font {
    font-weight: bold;
    font-size: 200%;

}

.change_color{
    color: #cc6699;
    text-decoration: underline;}
    
.change_style{
 font-style: italic;
 text-align:center;
}
}
.size{ height:100px;
   width:auto;

}
</style>

The html section

<!DOCTYPE html>
<html>
<head>
<script>
 $(document).ready(function(){
     $("button").click(function(){
        $(".head1").addClass("change_color");
        $(".pr1").addClass("change_style");
        $("#mytxt").addClass("change_font");
        $("#Img1").addClass("size");
    });
});
</script>
</head>
<body>
<h1 class="head1">Adding Class</h1>
<h2 class="head1">The addClass() Method</h2>
<p class="pr1">Change CSS of selected elements.</p>
<p class="pr1">Can add several classes together.</p>
<div id="mytxt">JQuery is Great!</div>
<img id="Img1" src="https://javascript-tutor.net//jquery/ladybug.gif">

<button>Add classes</button>
</body>
</html>

Adding Class

The addClass() Method

Change CSS of selected elements.

Can add several classes together.

JQuery is Great!

*Click the button to add classes

17.2 The removeClass() Method

The removeClass() removes one or more classes from the selected elements

Example 17.2

This example remove some classes from some selected elements .

<>Insert the following CSS in the heading.

<style>
.myfont {
    font-weight: bold;
    font-size: 200%;

}

.mycolor{
    color: #cc6699;
    text-decoration: underline;}
    
.mystyle{
 font-style: italic;
 text-align:center;
}

.mysize{ height:100px;
   width:auto;

}
</style>

The html section

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
 $("#btn2").click(function(){
        $(".mycolor").removeClass("mycolor");
        $(".mystyle").removeClass("mystyle");
        $(".myfont").removeClass("myfont");
        $(".mysize").removeClass("mysize");
    });
});
</script>
</head>
<body>
<h1 class="mycolor">Removing Class</h1>
<h2 class="mycolor">The removeClass() Method</h2>
<p class="mystyle">Remove CSS of selected elements.</p>
<p class="mystyle">Can remove several classes together.</p>
<div class="myfont">JQuery is Great!</div>
<img id="Img2" class="mysize" src="https://javascript-tutor.net//jquery/ladybug.gif">

<button id="btn2">Remove Classes

</body>
</html>

Removing Class

The removeClass() Method

Remove CSS of selected elements.

Can remove several classes together.

JQuery is Great!

*Click the button to remove classes

17.3 The toggleClass() Method

The toggleClass() method. This method toggles between adding and removing classes from the selected elements.

Example 17.3

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn3").click(function(){
        $(".heading1").toggleClass("change_color");
        $(".prg1").toggleClass("change_style");
        $("#mytext").toggleClass("change_font");
        $("#Img2").toggleClass("size");
    });
});
</script>
</head>
<body>
<h1 class="heading1">Adding Class</h1>
<h1 class="heading1">The addClass() Method</h1>
<p class="prg1">Change CSS of selected elements.</p>
<p class="pgr1">Can add several classes together.</p>
<div id="mytext">JQuery is Great!</div><br>
<img id="Img3" src="https://javascript-tutor.net//jquery/ladybug.gif">
<button id="btn3">Toggle Class</button>
</body>
</html>
</pre>
</div>
</body>
</html>

Adding Class

The addClass() Method

Change CSS of selected elements.

Can add several classes together.

JQuery is Great!

*Click the button to toggle classes

17.4 The css() Method

The css() method returns the CSS property value or modidy the content of the selected elements..

Example 17.4

This example returns the CSS property vaues of the selected elements.

The syntax is:

$(selector).css("PropertyName")

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
     $("#btn4").click(function(){
    var myheader=$("#myheading").css("text-decoration");
    var  bgclr1=$("#p1").css("background-color");
     var  bgclr2=$("#p2").css("background-color");
      var  bgclr3=$("#p3").css("background-color");
      var  myimg=$("#Img4").css("height")
      $("#head1").text(myheader);
      $("#sp1").text(bgclr1);
        $("#sp2").text(bgclr2);
          $("#sp3").text(bgclr3);
          $("#sp4").text(myimg);
    });
});
</script>
</head>
<body>
<h2 id="myheading" style="text-decoration:underline">This is a heading</h2>
<p id="p1" style="background-color:#ffaa88">First paragraph.</p>
<p id="p2" style="background-color:#aabb00">Second paragraph.</p>
<p id="p3" style="background-color:#eeccff">Third paragraph.</p>
<img id="Img4" src="https://javascript-tutor.net//jquery/ladybug.gif" style="width:150px; height:auto"><br>
<p>The text-decoration property value of the heading is
<span id="head1" style="font-weight:bold"></span></p>
<p>The background-color property value of the first paragraph is
<span id="sp1" style="font-weight:bold"></span></p>
<p>The background-color property value of the second paragraph is
<span id="sp2" style="font-weight:bold"></span></p>
<p>The background-color property value of the third paragraph is
<span id="sp3" style="font-weight:bold"></span></p>
<p>The height property value of the image is
<span id="sp4" style="font-weight:bold"></span></p>
<button id="btn4">Show the CSS Values</button>

</body>
</html>

This is a heading

First paragraph.

Second paragraph.

Third paragraph.

The text-decoration property value of the heading is

The background-color property value of the first paragraph is

The background-color property value of the second paragraph is

The background-color property value of the third paragraph is

The height property value of the image is

Example 17.5

This example modifies the CSS property vaues of the selected elements.

The syntax is:

$(selector).css("PropertyName", "value")

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn5").click(function(){
    $("#heading2").css("text-decoration","none");
    $("#para1").css("background-color", "red");
    $("#para2").css("background-color","#cc00ff");
    $("#para3").css("background-color", " rgb(238, 204, 255)");
    $("#Img4").css("height","200px")
 
    });
});
</script>
</head>
<body>

<h2 id="heading2" style="text-decoration:underline">This is the heading</h2>

<p id="para1" style="background-color:#ffaa88">First paragraph.</p>
<p id="para2" style="background-color:#aabb00">Second paragraph.</p>
<p id="para3" style="background-color:#eeccff">Third paragraph.</p>
<img id="Img4" src="https://javascript-tutor.net//jquery/ladybug.gif" style="width:150px; height:auto">

<button id="btn5">Change CSS Values</button>
</body>
</html>

This is the heading

First paragraph.

Second paragraph.

Third paragraph.

❮ Previous Lesson Next Lesson ❯