浅谈JQurey对元素的宽高操作（3）

今天说一下JQurey对元素的宽高操作。主要是通过CSS去改变元素的属性。

jq如果想改变元素的宽高可以直接使用.css()和.animate()方法来达到目的。

一、.css()方法

1、如果是想改变单个的css样式，可以这样去写

$(‘div’).css(‘height’,’100px’);

$(‘div’).css(‘width’,’100px’);

2、如果想要改变的css样式比较多可以写成这样：

$(‘div’).css({‘height’:’100px’,’width’:’100px’});

二、.animate()方法

1、如果是想改变单个的css样式，可以这样去写

$(‘div’).animate({‘height’:’100px’,’width’:’100px’});

2、如果想要改变的css样式比较多可以写成这样：

$(‘div’).animate({‘height’:’100px’,’width’:’100px’});

三、.css()和.animate()其实都是生成行内样式去改变元素的外观。不同之处是：

1、.css()是直接就改变元素的属性

2、.animate()给css的值给了个过度（动画）

下面例子是.css()和.animate()的区别：

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="box">
    BOX
</div>
<div class="box_btn">
    <a>css</a>
    <a>animate</a>
</div>
<style type="text/css">
    #box{ background:#000000; text-align:center; color:#fff; height:50px; width:50px; margin:0 auto;}
    .box_btn{ text-align:center; margin-top:20px;}
    .box_btn a{ display:inline-block; border:1px solid #333333; padding:5px 20px; margin:0 20px; cursor:pointer;}
</style>
<script type="text/javascript">
    var box1 = $('#box');
    var btn1 = $('.box_btn').find('a');
    btn1.click(function(){
        var btn_in = $(this).index();
        if (btn_in==0){
            box1.css({'height':'100px','width':'100px'});
        }else if (btn_in==1){
            box1.animate({'height':'200px','width':'200px'});
        };
    });
</script>

在线演示

浅谈JQurey对元素的宽高操作（1）

浅谈JQurey对元素的宽高操作（2）

浅谈JQurey对元素的宽高操作（3）