jquery add css rule code example
Example 1: jquery css
$('#element').css('display', 'block');
$('#element').css({'display': 'block', 'background-color' : '#2ECC40'});
Example 2: jQuery inline element style get set
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<style>
p {
color: green;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Move the mouse over a paragraph.</p>
<p>Like this one or the one above.</p>
<script>
$( "p" )
.on( "mouseenter", function() {
$( this ).css({
"background-color": "yellow",
"font-weight": "bolder"
});
})
.on( "mouseleave", function() {
var styles = {
backgroundColor : "#ddd",
fontWeight: ""
};
$( this ).css( styles );
});
</script>
</body>
</html>
Example 3: jQuery inline element style get set
<!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.5.0.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>