Here are HTML, css and jQuery source code examples of how to manipulate CSS elements on a webpage using toggleClass, .css(), addClass and removeClass with jQuery.
.CSS Method in jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid black;
background-color: yellow;
}
</style>
</head>
<body>
<!-- css return property
css property
css multiple property
-->
<div class="box">
<h1>this is heading1</h1>
<h2>this is heading1</h2>
<h3>this is heading1</h3>
</div>
<button class="btn1">returncss</button>
<button class="btn2">applycss</button>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// return css property
$(".btn1").click(function() {
alert("backgroundused: " + $(".box").css("background-color"))
})
// apply css property single and mutliple properties
$(".btn2").click(function() {
$("h1").css({
"background": "red",
"color": "white"
})
$("h2").css({
"background": "red",
"color": "white"
})
$("h3").css({
"background": "red",
"color": "white"
})
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid black;
background-color: yellow;
}
</style>
</head>
<body>
<!-- css return property
css property
css multiple property
-->
<div class="box">
<h1>this is heading1</h1>
<h2>this is heading1</h2>
<h3>this is heading1</h3>
</div>
<button class="btn1">returncss</button>
<button class="btn2">applycss</button>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// return css property
$(".btn1").click(function() {
alert("backgroundused: " + $(".box").css("background-color"))
})
// apply css property single and mutliple properties
$(".btn2").click(function() {
$("h1").css({
"background": "red",
"color": "white"
})
$("h2").css({
"background": "red",
"color": "white"
})
$("h3").css({
"background": "red",
"color": "white"
})
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid black;
background-color: yellow;
}
</style>
</head>
<body>
<!-- css return property
css property
css multiple property
-->
<div class="box">
<h1>this is heading1</h1>
<h2>this is heading1</h2>
<h3>this is heading1</h3>
</div>
<button class="btn1">returncss</button>
<button class="btn2">applycss</button>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// return css property
$(".btn1").click(function() {
alert("backgroundused: " + $(".box").css("background-color"))
})
// apply css property single and mutliple properties
$(".btn2").click(function() {
$("h1").css({
"background": "red",
"color": "white"
})
$("h2").css({
"background": "red",
"color": "white"
})
$("h3").css({
"background": "red",
"color": "white"
})
})
})
</script>
</body>
</html>
toggleClass, .css(), addClass, removeClass
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: red;
}
h2 {
color: blue;
}
.h1 {
font-size: 3em;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.h2 {
font-size: 3em;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
div {
border: 1px solid black;
width: 100px;
height: 100px;
}
.box {
width: 100px;
height: 100px;
background-color: slateblue;
}
</style>
</head>
<body>
<h1>this is heading1</h1>
<h2>this is heading2</h3>
<div></div>
<button class="adc">addclass</button>
<button class="adc2">removeclass</button>
<button class="adc3">toggleclass</button>
<button class="adc4">css</button>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// addclass()
$(".adc").click(function() {
$("h1").addClass("h1")
$("h2").addClass("h2")
$("div").addClass("box")
})
// removeclass()
$(".adc2").click(function() {
$("h1").removeClass()
$("h2").removeClass()
$(".box").removeClass()
})
// toggleclass
$(".adc3").click(function() {
$("h1").toggleClass("h1")
$("h2").toggleClass("h2")
$("div").toggleClass("box")
})
// css
$(".adc4").click(function() {
$("h1").css({
"color": "green"
})
$("h2").css({
"color": "red"
})
$("div").css({
"border-radius": "50%"
})
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: red;
}
h2 {
color: blue;
}
.h1 {
font-size: 3em;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.h2 {
font-size: 3em;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
div {
border: 1px solid black;
width: 100px;
height: 100px;
}
.box {
width: 100px;
height: 100px;
background-color: slateblue;
}
</style>
</head>
<body>
<h1>this is heading1</h1>
<h2>this is heading2</h3>
<div></div>
<button class="adc">addclass</button>
<button class="adc2">removeclass</button>
<button class="adc3">toggleclass</button>
<button class="adc4">css</button>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// addclass()
$(".adc").click(function() {
$("h1").addClass("h1")
$("h2").addClass("h2")
$("div").addClass("box")
})
// removeclass()
$(".adc2").click(function() {
$("h1").removeClass()
$("h2").removeClass()
$(".box").removeClass()
})
// toggleclass
$(".adc3").click(function() {
$("h1").toggleClass("h1")
$("h2").toggleClass("h2")
$("div").toggleClass("box")
})
// css
$(".adc4").click(function() {
$("h1").css({
"color": "green"
})
$("h2").css({
"color": "red"
})
$("div").css({
"border-radius": "50%"
})
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: red;
}
h2 {
color: blue;
}
.h1 {
font-size: 3em;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.h2 {
font-size: 3em;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
div {
border: 1px solid black;
width: 100px;
height: 100px;
}
.box {
width: 100px;
height: 100px;
background-color: slateblue;
}
</style>
</head>
<body>
<h1>this is heading1</h1>
<h2>this is heading2</h3>
<div></div>
<button class="adc">addclass</button>
<button class="adc2">removeclass</button>
<button class="adc3">toggleclass</button>
<button class="adc4">css</button>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// addclass()
$(".adc").click(function() {
$("h1").addClass("h1")
$("h2").addClass("h2")
$("div").addClass("box")
})
// removeclass()
$(".adc2").click(function() {
$("h1").removeClass()
$("h2").removeClass()
$(".box").removeClass()
})
// toggleclass
$(".adc3").click(function() {
$("h1").toggleClass("h1")
$("h2").toggleClass("h2")
$("div").toggleClass("box")
})
// css
$(".adc4").click(function() {
$("h1").css({
"color": "green"
})
$("h2").css({
"color": "red"
})
$("div").css({
"border-radius": "50%"
})
})
})
</script>
</body>
</html>
Manipulating HTML DOM child Elements with jquery and the CSS .children Method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box * {
display: block;
border: 2px solid black;
color: black;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<!-- parent()
parents()
parentuntil() -->
<div class="box">
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
</div>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("ul").find("span").css({
"border": "5px solid red"
})
$("ul").children().css({
"border": "5px solid red"
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box * {
display: block;
border: 2px solid black;
color: black;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<!-- parent()
parents()
parentuntil() -->
<div class="box">
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
</div>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("ul").find("span").css({
"border": "5px solid red"
})
$("ul").children().css({
"border": "5px solid red"
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box * {
display: block;
border: 2px solid black;
color: black;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<!-- parent()
parents()
parentuntil() -->
<div class="box">
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
</div>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("ul").find("span").css({
"border": "5px solid red"
})
$("ul").children().css({
"border": "5px solid red"
})
})
</script>
</body>
</html>
Tags: jQuery, jQuery CSS, toggleClass, .css(), addClass, removeClass, javascript, HTML Child Elements, Children(), nth-child, nth-last-child,
Source Licence: MIT license
