jQuery获取设置样式

作者: 马佳乐 | 来源:发表于2022-03-07 20:56 被阅读0次

jQuery-样式相关操作
前端面试（二）
jQuery操作样式与属性
jQuery获取设置样式
JQuery
jQuery(三)_设置CSS
jQuery 样式操作
从零玩转jQuery-CSS操作
jQuery |获取并设置样式css
jQuery设置及获取样式

css();方法
获取或设置样式

对以下html标签进行样式的获取和设置

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                height: 200px;
                background-color: pink;
                border: 2px solid red;
            }
        </style>
    </head>
    <body>
        <input type="button" value="获取" id="getBtn" />
        <input type="button" value="设置" id="setBtn" />
        <div id="div1" style="width: 200px;"></div>
        <div id="div2" style="width: 300px;"></div>
        <div id="div3" style="width: 400px;"></div>
    </body>

获取样式

css();方法设置参数，参数为要设置的样式名

<script>
    $(function(){
        $('#getBtn').click(function(){
            console.log($('#div1').css('width'));
            console.log($('#div1').css('height'));
            console.log($('#div1').css('background-color'));
            console.log($('#div1').css('backgroundColor'));
            console.log($('#div1').css('width'));
            console.log($('#div1').css('border'));
        });
    });
</script>

可用驼峰命名也可用css命名方式。注意样式名需要加''

点击获取按钮，结果：

但是在IE浏览器里，用console.log($('#div1').css('border'));可能会不显示或出现undefined。
在IE浏览器中,要获取边框这样的样式值,一定要记得给一个准确的边框值。例如：
console.log($('#div1').css('Border-top-width'));//2px
获取包含了多个DOM元素的jQuery对象的样式,只能获取到第一个DOM对象的样式。例如：
console.log($('div').css('width'));//200px

设置样式

css(样式名,样式值);
设置的样式是行内样式

设置单样式

<script>
    $(function(){
        $('#setBtn').click(function(){
            $('#div1').css('width','30Opx');
            $('#div1').css('height',300);
            $('#div1').css('backgroundColor','red');
            $('#div1').css('border','10px solid green');
        });
    });
</script>

单样式里样式名必须在''里，宽高度单位px可不写，这时300可不加''，如果加px，则必须为'300px'

设置多样式

<script>
    $(function(){
        $('#setBtn').click(function(){
            $('#div1').css({
                width:300,
                'height':'300px',
                //'background-color':'green',//这样也正确
                 backgroundColor:'green',
                'border-top-width':'10px'
            });
        });
    });
</script>

多样式里样式名可不加''。但是background-color:'green'这样写报错。

给多个div一起设置样式
隐式迭代,把每一个div都设置了同样的样式

<script>
    $(function(){
        $('#setBtn').click(function(){
            $('div').css({
                width:300,
                'height':'300px',
                 backgroundColor:'green',
                'border':'10px solid red',
                marginTop:10
            });
        });
    });
</script>