jquery用法--css操作

原创于 2017-01-17 16:43:05 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css

jquery 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了在jQuery中操作CSS的方法，包括直接设置样式属性、使用对象形式批量修改样式以及通过添加或删除类名来更改元素样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在jquery中对css的操作主要是在js中对元素进行样式的设置；

写法一:

<div>css操作</div>$(document).ready(function(){
      $('#dvi').css('width','100px');
      $('#dvi').css('height','100px');
      $('#dvi').css('background','red');
})

这种写法如果设置的样式过多的话，有点麻烦。

写法二：

$(document).ready（function(){
$('div').css({
         width:'150px',
            height:'150px',
            backgroundColor:'#343434'
        })
}）

写法三：

为元素添加类addClass

另外建一个css文件jq.css，定义一个样式类

.style{
     width: 200px;
     height: 200px;
     background: #2d57a1;
 }

在html文件里引入该文件。

js中添加该类；

$('div').addClass('style');

或者通过一个点击事件来触发该方法：

$('div').click(function(){
            //  $(this).addClass('style2');
           //   $(this).removeClass('style');  //也可以通过removeClass移除该类
            $(this).toggleClass('style2');    //实现div在样式1与样式2之间切换

        })