jQuery css() method

css() method sets or returns one or more style attributes of the selected element.

Return CSS properties

To return the value of the specified CSS property, please use the following syntax:

css("propertyname");

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("背景颜色 = " + $("p").css("background-color"));
  });
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回 p 元素的 background-color </button>
</body>
</html>

Set CSS properties

To set the specified CSS properties, please use the following syntax:

css("propertyname","value");

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color","yellow");
  });
});
</script>
</head>
<body>
<h2>标题</h2>
<p style="background-color:#ff0000; width:200px;">段落1</p>
<p style="background-color:#00ff00; width:200px;">段落2</p>
<p style="background-color:#0000ff; width:200px;">段落3</p>
<p style="width:300px;">段落4</p>
<button>设置 p 元素的背景</button>
</body>
</html>

Set multiple CSS properties

If you need to set multiple CSS properties, please use the following syntax:

css({"propertyname":"value ","propertyname":"value",...});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
  });
});
</script>
</head>
<body>
<h2>标题</h2>
<p style="background-color:#ff0000; width:200px;">段落1</p>
<p style="background-color:#00ff00; width:200px;">段落2</p>
<p style="background-color:#0000ff; width:200px;">段落3</p>
<p style="width:300px;">段落4</p>
<button>设置 p 元素的背景</button>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").css({color:"red",fontSize:20,backgroundColor:"yellow"}); }) }); </script> <style type="text/css"> div{ color:blue; background-color:green; width:100px; height:100px; margin-top:5px; } </style> </head> <body> <div>仔细查看变化</div> <div>仔细查看变化</div> <br> <button>点击查看效果</button> </body> </html>

submit Reset Code

Automatic operation

jQuery css() method

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]