Jquery 操作类
write by 2019/6/14 23:58
1. 介绍¶
Jquery的css() 方法设置或返回被选元素的一个或多个样式属性。
2. 获取值¶
如需返回指定的 CSS 属性的值,请使用如下语法:
css("propertyname");
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> #red { background-color: red; } #green { background-color: green; } #darkgrey { background-color: darkgrey; } </style> </head> <body> <h2>这是一个标题</h2> <p id="red">这是一个段落。</p> <p id="green">这是一个段落。</p> <p id="darkgrey">这是一个段落。</p> <button id="btn1">按钮1</button> <button id="btn2">按钮2</button> <button id="btn3">按钮3</button> </body> <script> $(function () { $('#btn1').click(function () { console.log("背景颜色是: "+$("#red").css("background-color")) }); $('#btn2').click(function () { console.log("背景颜色是: "+$("#green").css("background-color")) }); $('#btn3').click(function () { console.log("背景颜色是: "+$("#darkgrey").css("background-color")) }); }) </script> </html>
3. 设置值¶
如需设置指定的 CSS 属性,请使用如下语法:
css("propertyname","value");
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> #red { background-color: red; } #green { background-color: green; } #darkgrey { background-color: darkgrey; } </style> </head> <body> <h2>这是一个标题</h2> <p id="red">这是一个段落。</p> <p id="green">这是一个段落。</p> <p id="darkgrey">这是一个段落。</p> <button id="btn1">按钮1</button> <button id="btn2">按钮2</button> <button id="btn3">按钮3</button> </body> <script> $(function () { $('#btn1').click(function () { $("#red").css("background-color",'yellow') }); $('#btn2').click(function () { $("#green").css("background-color",'yellow') }); $('#btn3').click(function () { $("#darkgrey").css("background-color",'yellow') }); }) </script> </html>
4. 批量设置¶
如需设置多个 CSS 属性,请使用如下语法:
css({"propertyname":"value","propertyname":"value",...});
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> #red { background-color: red; } #green { background-color: green; } #darkgrey { background-color: darkgrey; } </style> </head> <body> <h2>这是一个标题</h2> <p id="red">这是一个段落。</p> <p id="green">这是一个段落。</p> <p id="darkgrey">这是一个段落。</p> <button id="btn1">按钮1</button> <button id="btn2">按钮2</button> <button id="btn3">按钮3</button> </body> <script> $(function () { $('#btn1').click(function () { $("#red").css({"background-color":'yellow','font-size':'200%'}) }); $('#btn2').click(function () { $("#green").css({"background-color":'yellow','font-size':'200%'}) }); $('#btn3').click(function () { $("#darkgrey").css({"background-color":'yellow','font-size':'200%'}) }); }) </script> </html>