jQuery样式操作之css方法

最新推荐文章于 2022-12-29 11:24:18 发布

Eli-sun

最新推荐文章于 2022-12-29 11:24:18 发布

阅读量317

点赞数

分类专栏： jQuery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/vfjcgg/article/details/105620392

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

操作CSS方法
jquery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式
1.参数只写属性名，则是返回属性值
$(this).css(‘color’)
2.参数是属性名、属性值、逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号。
$(this).css(‘color’,‘red’);
3.参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号。
$(this).css({‘color’:‘white’,‘font-size’:‘20px’});

栗子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-mini.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        $(function() {
            console.log($('div').css('width'));
            //$('div').css('width', '300px');//属性名一定要加引号
            //$('div').css('width', 300)
            $('div').css({
                width: 400,
                height: 400,
                backgroundColor: 'red'
                    // 如果是复合属性必须采取驼峰命名法，如果值不是数字则需要加引号
            })
        })
    </script>
</body>

</html>