• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

5.1 CSS属性操作

在jQuery中,关于元素的样式操作方法共有2种:

  • (1)CSS属性操作;
  • (2)CSS类名操作;

这一节我们先来学习CSS属性操作的方法。在jQuery中,我们可以使用css()方法为获取或设置某个元素的CSS属性的值。

一、获取CSS属性值

语法:

 
$().css("属性")

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        p
        {
            color:Red;
            background-color:#F1F1F1;
            font-weight:bold;
        }
    </style>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var str = $("p").css("color");
                alert("p元素的color属性值是:" + str);
            })
        })
    </script>
</head>
<body>
    <p>绿叶学习网jQuery入门教程</p>
    <input id="btn" type="button" value="获取"/>
</body>
</html>

在浏览器预览效果如下:

分析:

$("#btn").click(function(){……})表示按钮的鼠标单击事件,接触过JavaScript的同学一看就懂了。这也是为什么我在之前强调,一定要有JavaScript基础再来学习jQuery。当然关于jQuery各种事件处理,我们在后续章节也会有详细介绍。

$("p").css("color")表示获取p元素的color属性值。其中,当我们点击“获取”按钮,浏览器会弹出如下对话框:

二、设置CSS属性值

设置某个元素的CSS属性值,分为2种情况:(1)设置单个CSS属性;(2)设置多个CSS属性。

1、设置单个CSS属性

语法:

 
$().css("属性","属性值")

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                $("ul li:nth-child(odd)").css("color","red");
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>ASP.NET</li>
    </ul>
    <input id="btn" type="button" value="设置" />
</body>
</html>

在浏览器预览效果如下:

当我们点击“设置”按钮之后,在浏览器预览效果如下:

分析:

$("ul li:nth-child(odd)").css("color","red")这句代码中使用了子元素伪类选择器,表示选取ul元素下的奇数个li元素,然后设置color属性值为red。

2、设置多个CSS属性

语法:

 
$().css({"属性1":"属性值1","属性2":"属性值2",……})

说明:

但我们为元素同时设置多个CSS属性值时,应该用{}括起来,并且属性与属性值以“键值对”的形式,每个键值对之间用英文逗号隔开。这种 “键值对”的形式,跟JSON数据格式、JavaScript对象的属性形式是非常相似的。

当然我们也可以用这种方式为元素设置单个CSS属性。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                $("ul li:nth-child(odd)").css("color","red");
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>ASP.NET</li>
    </ul>
    <input id="btn" type="button" value="设置" />
</body>
</html>

在浏览器预览效果如下:

当我们点击“设置”按钮,在浏览器预览效果如下:

分析:

这里使用css()方法为选取的元素同时设置多个CSS属性值。

其实我们也可以使用这种形式为选取的元素设置单个CSS属性。例如:

 
$("ul li:nth-child(odd)").css("color","red");

上述这句代码等价于:

 
$("ul li:nth-child(odd)").css({"color":"red"});
:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部