jQuery css() 方法

最新推荐文章于 2024-05-18 20:51:36 发布

「已注销」

最新推荐文章于 2024-05-18 20:51:36 发布

阅读量662

点赞数

本文链接：https://blog.csdn.net/m0_57835615/article/details/117467750

版权

jQuery css() 方法方法设置或返回被选元素的一个或多个样式属性。

1.返回指定的 CSS 属性的值

语法格式：

css("propertyname");

示例：

返回div的CSS属性值

    <script src="jQuery.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: rgba(22, 180, 8, 0.74);
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
            console.log($(".box").css("background-color"));
            console.log($(".box").css("width"));
            console.log($(".box").css("height"));
    </script>
</body>

控制台输出：

2.设置CSS属性

语法格式：

css("propertyname","value");

示例：

设置元素的背景颜色

    <script src="jQuery.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
            $('.box').css("background-color","blue");
    </script>
</body>

效果图：

3.设置多个 CSS 属性

语法格式：

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

示例：

设置元素的宽、以及背景颜色

<body>
    <div class="box"></div>
    <script>
            $('.box').css({
                "background-color":"skyblue",
                "width":"200px",
                "height":"200px"
            });
    </script>
</body>

效果图：