浅谈JQurey对元素的宽高操作(3)

浏览: 265次 日期:2018年01月20日 17:41:23 作者:青格勒

今天说一下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)

文章链接:http://cenggel.com/js/53.html

版权声明:文章《浅谈JQurey对元素的宽高操作(3)》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注