jQuery-css方法

最新推荐文章于 2024-07-23 14:51:29 发布

Southern Wind

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量175

点赞数

分类专栏： jQuery 文章标签： jquery css html

本文链接：https://blog.csdn.net/nanchen_J/article/details/120154285

版权

jQuery 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

一、返回css属性

语法：css("propertyname");

可以获取css的某个属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery-3.6.0.js"></script>
    <title>css方法</title>
</head>
<body>
    <p style="background-color: blue;">这是一个p标签</p>
    <button>点击弹出<b>css属性</b></button>
    <script>
        $(document).ready(function(){
            $('button').click(function(){
                alert($('p').css('background-color'));
            })
        })
    </script>
    
</body>
</html>

效果如下：

这样写只可以获取第一个背景属性。

如何获取多个p标签的背景属性？

第一种：加上:nth-child(位置)即可。

alert($("p:nth-child(2)").css("background-color"));
alert($("p:nth-child(3)").css("background-color"));

第二种方法：

eq() : 返回被选元素中带有指定索引号的元素（此方法会在过滤一章节）

$("p").eq(N) // N 是索引号，从 0 开始

第三种方法：

可以使用for循环显示

for (var i = 0; i < 3; i++) {

alert($('p').eq(i).css('background-color'));

}

二、设置css属性

语法：css("propertyname","value");

<body>
    <p style="background-color: blue;">这是一个p标签</p>
    <p style="background-color: red;">这是一个p标签</p>
    <p style="background-color: yellow;">这是一个p标签</p>
    <button>点击弹出<b>css属性</b></button>
    <script src="../jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function(){
            $('button').click(function(){
                $('p').css('background-color','gray');        //设置属性 背景色为灰色
                $('p').css('color','white');                    //文字为白色
            })
        })
    </script>
</body>

效果如图：

三、设置多个属性

上方方法可也以设置多个属性，但是代码量较多，可以简写成以下写法

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

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

效果如下图：

Southern Wind

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery-css方法

一、返回css属性语法：css("propertyname");可以获取css的某个属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev.
复制链接

扫一扫