jQuery css样式操作

css样式操作

$().css(name，value); //设置
$().css(name); //获取
$().css(json对象); //同时修改多个css样式

css()样式操作特点：
① 样式获取，jquery可以获取行内、内部、外部的样式。
dom方式只能获得行内样式
② 复合属性样式需要拆分为"具体样式"才可以操作
例如： background 需要拆分为 background-color background-image 等进行操作
border： border-left-style border-left-width border-left-color 等
margin： margin-left margin-top 等

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
           function f1(){
                alert($('div').css('background-color'));
           }
           function f2(){
            $('div').css('background-color','red')
           }
           function f3(){
                var jn={'width':'300px','height':'300px'};
                $('div').css(jn);
           }
        </script>
    </head>
    <body>
        <div style="width:200px; height:150px; background-color:lightblue;">欢迎大家学习jQuery</div>
        <input type="button" value="获取背景色" onclick="f1()" />
        <input type="button" value="设置背景色" onclick="f2()" /> 
        <input type="button" value="批量设置" onclick="f3()" /> 
    </body>
</html>

新建文件

<!DOCTYPE html>
<html>
 <head>
 <title>php.cn</title>
 <meta charset="utf-8" />
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
 <script>
 function f1(){
 alert($('div').css('background-color'));
 }
 function f2(){
 $('div').css('background-color','red')
 }
 function f3(){
 var jn={'width':'300px','height':'300px'};
 $('div').css(jn);
 }
 </script>
 </head>
 <body>
 <div style="width:200px; height:150px; background-color:lightblue;">欢迎大家学习jQuery</div>
 <input type="button" value="获取背景色" onclick="f1()" />
 <input type="button" value="设置背景色" onclick="f2()" /> 
 <input type="button" value="批量设置" onclick="f3()" /> 
 </body>
</html>
 

提交重置代码

自动运行

全屏