The jQuery css() function is used to get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.
Try it Yourself - Copy paste code in Online HTML Editor to see the result
Try it Yourself - Copy paste code in Online HTML Editor to see the result
Example 1 - Get the background color of a clicked div
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<style>
div {
width: 60px;
height: 60px;
margin: 5px;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<span id="result"> </span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script>
$("div").click(function() {
var color = $(this).css("background-color");
$("#result").html("That div is <span style='color:" +
color + ";'>" + color + "</span>.");
});
</script>
</body>
</html>
Example 2
Get the width, height, text color, and background color of a clicked div.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<style>
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb(255, 255, 255);
background-color: rgb(15, 99, 30);
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<p id="result"> </p>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<script>
$("div").click(function() {
var html = ["The clicked div has the following styles:"];
var styleProps = $(this).css([
"width", "height", "color", "background-color"
]);
$.each(styleProps, function(prop, value) {
html.push(prop + ": " + value);
});
$("#result").html(html.join("<br>"));
});
</script>
</body>
</html>
Example 3
Change the color of any paragraph to red on mouseover event.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<style>
p {
color: blue;
width: 200px;
font-size: 14px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<p>Just roll the mouse over me.</p>
<p>Or me to see a color change.</p>
<script>
$("p").on("mouseover", function() {
$(this).css("color", "red");
});
</script>
</body>
</html>
Example 4
Highlight a clicked word in the paragraph.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<style>
p {
color: blue;
font-weight: bold;
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<p>
Once upon a time there was a man who lived in a pizza parlor. This man just loved pizza and ate it all the time. He went on to be the happiest man in the world. The end.
</p>
<script>
var words = $("p").first().text().split(/\s+/);
var text = words.join("</span> <span>");
$("p").first().html("<span>" + text + "</span>");
$("span").on("click", function() {
$(this).css("background-color", "yellow");
});
</script>
</body>
</html>
Comments
Post a Comment