【jQuery笔记Part1】08-jQuery操作css-&获取&设置样式

最新推荐文章于 2023-07-18 11:15:14 发布

萌宅鹿同学

最新推荐文章于 2023-07-18 11:15:14 发布

阅读量214

点赞数

分类专栏： # jQuery笔记文章标签： jQuery JS css() jQuery操作css

本文链接：https://blog.csdn.net/weixin_43734095/article/details/100055711

版权

jQuery笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

jQuery操作css-css(）

通过 css() 方法获取样式
通过 css() 方法设置样式
完整案例

jQuery笔记目录

通过 css() 方法获取样式

$('#get_style').click(function () {
    var w = $box.css('width');
    var h = $box.css('height');
    var bgc = $box.css('background-color');
    console.log("宽度为:" + w + ",高度为:" + h + ",背景颜色为:" + bgc);
})

运行结果：
在这里插入图片描述

通过 css() 方法设置样式

获取或者设置样式时，加了单引号则可以用属性来获取样式，否则要写成单词形式。

$box.css('background-color','yellow');
$box.css(backgroundColor, 'yellow');

方法一：单一属性设置

$('#set_style').click(function () {
    // 方式1
    $box.css('width', '300px');
    $box.css('height','300px');
    $box.css('background-color','yellow');
 })

方法二：链式调用

$('#set_style').click(function () {
    // 方式2，链式调用
    $box.css('width','300px').css('height','300px').css('background-color','purple');
})

方法三：多个属性设置（最常用）

$('#set_style').click(function () {
    // 方式3（最常用）
    $box.css({
        'width':'400px',
        'height':'400px',
        'background-color':'blue'
    });
})

完整案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <br>
    <button id="get_style">获取样式</button>
    <button id="set_style">设置样式</button>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        // 0. 获取需要的标签
        var $box = $('#box');

        // 1. 点击按钮获取样式
        $('#get_style').click(function () {
            var w = $box.css('width');
            var h = $box.css('height');
            var bgc = $box.css('background-color');
            console.log("宽度为:" + w + ",高度为:" + h + ",背景颜色为:" + bgc);
        })
        //2. 点击按钮设置样式
        $('#set_style').click(function () {
            // 方式1
            // $box.css('width', '300px');
            // $box.css('height','300px');
            // $box.css('background-color','yellow');

            // 方式2，链式调用
            // $box.css('width','300px').css('height','300px').css('background-color','purple');

            // 方式3（最常用）
            $box.css({
                'width':'400px',
                'height':'400px',
                'background-color':'blue'
            });
        })
    });
</script>

</body>
</html>