JQuery can let you manipulate CSS easily using several methods.
The CSS manipulating methods are addClass(), removeClass(),toggleClass() and css().
The addClass() method adds one or more classes to selected elements .
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.netjquery/ladybug.gif">
<button>Add classes</button>
</body>
</html>
Change CSS of selected elements.
Can add several classes together.
*Click the button to add classes
The removeClass() method removes one or more classes from the selected elements
This example removes 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.netjquery/ladybug.gif">
<button id="btn2">Remove Classes
</body>
</html>
Remove CSS of selected elements.
Can remove several classes together.
*Click the button to remove classes
The toggleClass() method. This method toggles between adding and removing classes from the selected elements.
<!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.netjquery/ladybug.gif">
<button id="btn3">Toggle Class</button>
</pre>
</div>
</body>
</html>
Change CSS of selected elements.
Can add several classes together.
*Click the button to toggle classes
The css() method returns the CSS property value or modifies the content of the selected elements..
This example returns the CSS property values 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.netjquery/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>
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
This example modifies the CSS property values 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.netjquery/ladybug.gif" style="width:150px; height:auto">
<button id="btn5">Change CSS Values</button>
</body>
</html>
First paragraph.
Second paragraph.
Third paragraph.
Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy