Jquery常用css函数

最新推荐文章于 2024-06-14 11:01:38 发布

weixin_30455365

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量85

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/zcttxs/archive/2012/05/11/2495519.html

版权

jQuery 拥有三种用于 CSS 操作的重要函数：

$(selector).css(name,value)

$(selector).css({properties})

$(selector).css(name)

1、css() 改变html元素的css属性,将所有匹配元素的单个样式属性设置为一个值，如果提供一个数字，则该数字将自动转换为像素值。

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>改变css元素的属性</title>
 5     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             $("button").click(function () {
 9                 $("p").css("background-color","red"); 
10             });
11         });
12     </script>
13 </head>
14 <body>
15     <h2>
16         This is a heading</h2>
17     <p>
18         This is a paragraph.</p>
19     <p>
20         This is another paragraph.</p>
21     <button type="button">
22         Click me</button>
23 </body>
24 </html>

改变多个css属性

View Code

$(document).ready(function () {
            $("button").click(function () {
                $("p").css({ "background-color": "red", "font-size": "200%" });
            });
        });

2、获得css的属性

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>获得元素的css的属性</title>
     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $("div").click(function () {
                 $("#result").html($(this).css("background-color"));
             });
         });
     </script>
 </head>
<body>
     <div style="width: 100px; height: 100px; background: #ff0000">
     </div>
     <p id="result">
         Click in the box</p>
 </body>
 </html>

转载于:https://www.cnblogs.com/zcttxs/archive/2012/05/11/2495519.html

weixin_30455365

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery常用css函数

jQuery 拥有三种用于 CSS 操作的重要函数：$(selector).css(name,value)$(selector).css({properties})$(selector).css(name)1、css() 改变html元素的css属性,将所有匹配元素的单个样式属性设置为一个值，如果提供一个数字，则该数字将自动转换为像素值。View Code ...
复制链接

扫一扫