1$('#element').css('display', 'block'); /* Single style */
2$('#element').css({'display': 'block', 'background-color' : '#2ECC40'}); /* Multiple style */
1<!doctype html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <title>css demo</title>
6 <style>
7 p {
8 color: green;
9 }
10 </style>
11 <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
12</head>
13<body>
14
15<p>Move the mouse over a paragraph.</p>
16<p>Like this one or the one above.</p>
17
18<script>
19$( "p" )
20 .on( "mouseenter", function() {
21 $( this ).css({
22 "background-color": "yellow",
23 "font-weight": "bolder"
24 });
25 })
26 .on( "mouseleave", function() {
27 var styles = {
28 backgroundColor : "#ddd",
29 fontWeight: ""
30 };
31 $( this ).css( styles );
32 });
33</script>
34
35</body>
36</html>
37
1<!doctype html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <title>css demo</title>
6 <style>
7 div {
8 height: 50px;
9 margin: 5px;
10 padding: 5px;
11 float: left;
12 }
13 #box1 {
14 width: 50px;
15 color: yellow;
16 background-color: blue;
17 }
18 #box2 {
19 width: 80px;
20 color: rgb(255, 255, 255);
21 background-color: rgb(15, 99, 30);
22 }
23 #box3 {
24 width: 40px;
25 color: #fcc;
26 background-color: #123456;
27 }
28 #box4 {
29 width: 70px;
30 background-color: #f11;
31 }
32 </style>
33 <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
34</head>
35<body>
36
37<p id="result"> </p>
38<div id="box1">1</div>
39<div id="box2">2</div>
40<div id="box3">3</div>
41<div id="box4">4</div>
42
43<script>
44$( "div" ).click(function() {
45 var html = [ "The clicked div has the following styles:" ];
46
47 var styleProps = $( this ).css([
48 "width", "height", "color", "background-color"
49 ]);
50 $.each( styleProps, function( prop, value ) {
51 html.push( prop + ": " + value );
52 });
53
54 $( "#result" ).html( html.join( "<br>" ) );
55});
56</script>
57
58</body>
59</html>
60