jQuery css() 方法

Posted 乱舞春秋__

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery css() 方法相关的知识,希望对你有一定的参考价值。

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>

效果图:

以上是关于jQuery css() 方法的主要内容,如果未能解决你的问题,请参考以下文章

高效Web开发的10个jQuery代码片段

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升

几个有用的JavaScript/jQuery代码片段(转)

几个可以直接拿来用的jQuery代码片段

几个可以直接拿来用的jQuery代码片段