jquery动态设置css jquery 设置css

jQuery操作css样式的几种方法

• css(name|pro|[,val|fn])

• 一个参数：获取css属性值；
• 两个参数：设置css属性；

• 参数可以是属性名对属性值，或者是一个属性，又或者是多个属性组成的对象；
• 使用该方法有三种设置css样式的途径：

• 逐个设置；
• 链式设置（一般不要超过三个，要保证可阅读性）；
• 批量设置；
  如下代码所示：

<div></div>

<script>
    // jquery操作样式的方法：css(name|pro[,val|fn]);
    // 1.逐个设置
    $(function(){
        $('div').css('width','200px');
        $('div').css('height','200px');
        $('div').css('backgroundColor','pink');
    });
    
    // 2.链式设置
    $(function(){
        $('div').css('border','1px solid #ccc').css('box-shadow','5px 5px 5px #ff6700');
    });
    
    // 3.批量设置
    $(function(){
        $('div').css({
            'border-radius' : '10px',
            'transform' : 'rotate(45deg)'
        })
    })
    
            
    // 4.一个参数：获取css属性值
    $(function(){
        var res1 = $('div').css('border-radius');
        console.log(res1);//10px
    })
</script>