JQuery中.css()与.addClass()设置样式的区别

原创 2016年05月31日 19:35:08
对于样式的设置,我们学了addClass与css方法,那么两者之间有什么区别?

可维护性:

.addClass()的本质是通过定义个class类的样式规则,给元素添加一个或多个类。css方法是通过JavaScript大量代码进行改变元素的样式

通过.addClass()我们可以批量的给相同的元素设置统一规则,变动起来比较方便,可以统一修改删除。如果通过.css()方法就需要指定每一个元素是一一的修改,日后维护也要一一的修改,比较麻烦

灵活性:

通过.css()方式可以很容易动态的去改变一个样式的属性,不需要在去繁琐的定义个class类的规则。一般来说在不确定开始布局规则,通过动态生成的HTML代码结构中,都是通过.css()方法处理的

样式值:

.addClass()本质只是针对class的类的增加删除,不能获取到指定样式的属性的值,.css()可以获取到指定的样式值。

样式的优先级:

css的样式是有优先级的,当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候,优先级如下
外部样式 < 内部样式 < 内联样式
1..addClass()方法是通过增加class名的方式,那么这个样式是在外部文件或者内部样式中先定义好的,等到需要的时候在附加到元素上
2.通过.css()方法处理的是内联样式,直接通过元素的style属性附加到元素上的
通过.css方法设置的样式属性优先级要高于.addClass方法

总结
.addClass与.css方法各有利弊,一般是静态的结构,都确定了布局的规则,可以用addClass的方法,增加统一的类规则
如果是动态的HTML结构,在不确定规则,或者经常变化的情况下,一般多考虑.css()方式。

具体看应用:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left,
    .right {
        width: 300px;
        height: 120px;
    }

    .left div,
    .right div {
        width: 200px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
    }
    a{
        font-size: 14px;
        display:block;
    }
    .newClass{
        background: #bbffaa;
    }

    .imoocClass{
        background: red;
    }
    .addBorder{
        border: 1px solid red;
    }

    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>.addClss()与.css()方法区别</h2>
    <div class="left">
        <div class="aaron">
            <a>css优先级高于addClass</a>
            <a>1:第一次addClss背景色</a>
            <a>2:第二次css修改背景色</a>
        </div>
    </div>
    <div class="right">
        <div class="aa bb imooc">
            <article>
                <a>imoocClass</a>
            </article>
        </div>
    </div>


    <script type="text/javascript"> 
        //给所有的div统一增加边宽
        $('div').addClass("addBorder")
    </script>

    <script type="text/javascript"> 
        //class=left下div元素增加一个新的样式,增加背景颜色
        $('.aaron').addClass("newClass")
    </script>

    <script type="text/javascript"> 
        //通过css覆盖addClass方式设置背景色
        $('.aaron').css(
            {
                'background-color':'yellow'
            })
    </script>



</body>

</html>

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery用addClass方法同时增加多个class属性

一句话代码:
  • it_ga
  • it_ga
  • 2015年12月28日 22:49
  • 4969

addClass(element,value)函数,设置和叠加css样式

之前写过 javascript Camel记号 获取和设置元素CSS样式信息的CSS属性值  ,我们可以通过element.style.css样式属性  来获取和设置元素的样式信息 这样并不是不可以...
  • hedong37518585
  • hedong37518585
  • 2011年08月02日 16:19
  • 2883

关于jQuery $(selector).addClass(class) IE8 兼容的说法

我想浏览器兼容,是很多前台人的烦恼吧,随着时间的推移,技术在不断的进步, 这就意味我们曾经有过或多或少的问题,而我们并不能抛弃,因为我们的产品在更新,并不意味着之前的产品大家不用,我们任然不可避免的去...
  • u010251897
  • u010251897
  • 2016年02月29日 16:22
  • 3348

jQuery之addClass与removeClass使用实例

常见的用途在HTML里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性获取的不是class名称的数组,而是一个含有空格的字符串,这就...
  • AgnesLuo
  • AgnesLuo
  • 2016年04月10日 10:44
  • 2937

用原生js实现addClass,removeClass,hasClass方法

其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断。 classList属性的方法有: add(value) 添加类名,如果...
  • u010582082
  • u010582082
  • 2017年04月18日 13:24
  • 3375

用JS封装的通用addClass方法(函数)和removeClass方法(函数)

/* * 函数名:添加class。 * 参数说明:element(必选) 指的是需要添加class的元素(对象); new_name(必选) 指的是需要添加的class名。 * 返回值说明:形参...
  • Mr_28
  • Mr_28
  • 2017年03月20日 10:15
  • 408

jquery的css()和addClass()的注意点

css()是一个可以简单改变指定对象样式的方法,而addClass()则是     在所选对象中加入一个class。     为了实现一个表格相邻行显示不同的颜色,一般使用:       $('...
  • honey_th
  • honey_th
  • 2012年03月26日 20:07
  • 4517

原生js 实现addclass和removeclass

function getElementsByClassName(className,root,tagName) { //root:父节点,tagName:该节点的标签名。 这两个参数均可有可无 ...
  • u010822824
  • u010822824
  • 2016年08月17日 11:30
  • 3717

原生JS实现addClass,removeClass,toggleClass

jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.add...
  • LowKeySk
  • LowKeySk
  • 2012年10月12日 11:25
  • 98955

Jquery中.css()与.addClass()两种方法设置样式的区别

1、addClass()方法是通过增加class名的方式,类似于这个样式是在外部文件或者内部样式中先定义好的,需要时附加到元素上。 2、.css()方法定义的是内联样式,类似于直接通过元素的style...
  • taohai123
  • taohai123
  • 2016年08月03日 10:54
  • 1431
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery中.css()与.addClass()设置样式的区别
举报原因:
原因补充:

(最多只允许输入30个字)