前面的话

  使用javascript脚本化CSS是一个系列,包括行间样式计算样式CSS类样式表动态样式伪元素这六部分。而jQuery也实现了脚本化CSS的功能,提供了更为简单易用的方法

设置样式

  前面介绍过jQuery的特性操作,可以通过attr()方法进行样式设置

<style>
.cB{color: blue;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test">测试文字</div>
<button id="btn1">按钮</button>
<script>
btn1.onclick = function(){
    $('#test').attr('class','cB')
}
</script>

  [注意]jQuery对象无法直接使用className属性设置类名,需要转换为javascript对象才可以使用

<style>
.cB{color: blue;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test">测试文字</div>
<button id="btn1">按钮</button>
<script>
btn1.onclick = function(){
    $('#test')[0].className = 'cB';
}
</script>

增加样式

addClass(className)

  addClass(className)方法为每个匹配元素增加一个或多个样式名,如果值已存在,则不添加 

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test">测试文字</div>
<button id="btn1">按钮</button>
<script>
btn1.onclick = function(){
    $('#test').addClass('cB bgO')
}
</script>

addClass(function(index, currentClass))

  addClass()方法可以接受一个函数作为参数,这个函数返回一个或更多用空格隔开的要增加的样式名。接收index参数表示元素在匹配集合中的索引位置和currentClass参数表示元素上原来的className。在函数中this指向匹配元素集合中的当前元素

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB">测试文字</div>
<button id="btn1">按钮</button>
<script>
btn1.onclick = function(){
    $('#test').addClass(function(index,currentClass){
        alert('' + index + currentClass );//'0cB'
        return 'bgO';
    })
}
</script>

删除样式

removeClass()

  removeClass()方法不带参数时,将删除全部类名

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">测试文字</div>
<button id="btn1">按钮</button>
<script>
btn1.onclick = function(){
    $('#test').removeClass();
}
</script>

removeClass([className])

  removeClass([className])方法用来删除参数中指定的一个或多个类名

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">测试文字</div>
<button id="btn1">按钮</button>
<script>
btn1.onclick = function(){
    $('#test').removeClass('cB bgO');
}
</script>

removeClass(function(index, currentClass))

  removeClass()方法可以接收一个函数为参数,该函数返回一个或多个将要被移除的样式名。index参数表示在所有匹配元素的集合中当前元素的索引位置,currentClass参数表示原有的样式名

  [注意]由于class是保留字,所以形参名设置为class时,会导致错误

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">测试文字</div>
<button id="btn1">按钮</button>
<script>
btn1.onclick = function(){
    $('#test').removeClass(function(index,currentClass){
        alert('' + index + currentClass);//0cB bgO
        return 'bgO';
    });
}
</script>

切换样式

toggleClass()

  在做某些效果的时候,可能会针对同一节点的某一个样式不断的切换,也就是addClass与removeClass的互斥切换,比如隔行换色效果

  jQuery提供一个toggleClass()方法用于简化这种互斥的逻辑,通过toggleClass()方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass

  toggleClass()有以下4种用法

【1】toggleClass()

  当toggleClass()方法没有参数时,将删除或还原全部类名

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">测试文字</div>
<button id="btn1">按钮</button>
<script>
btn1.onclick = function(){
    $('#test').toggleClass();
}
</script>    

【2】toggleClass(className)

  toggleClass(className)方法在匹配的元素集合中的每个元素上切换的一个或多个(用空格隔开)样式类名

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">测试文字</div>
<button id="btn1">按钮</button>
<script>
btn1.onclick = function(){
    $('#test').toggleClass('bgO');
}
</script>

【3】toggleClass(className,switch)

  toggleClass()方法可以接收第二个参数switch,用来判断样式类是否应该被添加或删除。如果这个参数的值是true,那么这个样式类将被添加,相当于addClass;如果这个参数的值是false,那么这个样式类将被移除,相当于removeClass

$('#foo').toggleClass(className, addOrRemove);
//等价于
if (addOrRemove){
    $('#foo').addClass(className);
}else{
    $('#foo').removeClass(className);
}
<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">测试文字</div>
<button id="btn1">添加</button>
<button id="btn2">删除</button>
<script>
btn1.onclick = function(){$('#test').toggleClass('bgO',true);}
btn2.onclick = function(){$('#test').toggleClass('bgO',false);}
</script>

【4】toggleClass(function(index,currentClass,switcher)[,switch])

  toggleClass()可以接收一个函数作为参数,该函数用来返回在匹配的元素集合中的每个元素上用来切换的样式类名,接收元素的索引位置和元素旧的样式类作为参数 

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">测试文字</div>
<button id="btn1">添加</button>
<button id="btn2">删除</button>
<button id="btn3">变更</button>
<script>
btn1.onclick = function(){$('#test').toggleClass(function(index,currentClass,switcher){
    alert('' + index + currentClass + switcher)
    return 'bgO'
},true)};
btn2.onclick = function(){$('#test').toggleClass(function(index,currentClass,switcher){
    alert('' + index + currentClass + switcher)
    return 'bgO'
},false)};
btn3.onclick = function(){$('#test').toggleClass(function(index,currentClass,switcher){
    alert('' + index + currentClass + switcher)
    return 'bgO'
})};
</script>

判断样式

hasClass(className)

  hasClass(className)方法用于确定任何一个匹配元素是否有被分配给定的类名,如果有则返回true;否则,返回false

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">测试文字</div>
<button id="btn1">按钮</button>
<button id="btn2">是否存在指定样式</button>
<script>
btn1.onclick = function(){$('#test').toggleClass('bgO');}
btn2.onclick = function(){alert($('#test').hasClass('bgO'))}
</script>

  [注意]该方法实际是为了增强代码可读性产生的。在jQuery()内部实际上是调用了is()方法来完成这个功能的

  在javascript中,HTML5为所有元素添加了classList属性,这个classList属性是新集合类型DOMTokenList的实例,它也有类似的方法

add(value)              将给定的字符串值添加到列表中,如果值已存在,则不添加
contains(value)         表示列表中是否存在给定的值,如果存在则返回true,否则返回false
remove(val,e)          从列表中删除给定的字符串
toggle(value)           如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它

  由于IE9-浏览器不支持classList属性,也就不支持add()、contains()、remove()和toggle()这四个方法

  关于classList属性的类似的4个方法及兼容写法的详细信息移步至此

样式操作

  在javascript中,查询计算样式需要处理getComputedStyle()方法和currentStyle属性的兼容;设置行间样式需要对style属性赋值

  而在jQuery中,使用CSS()方法就可以解决以上的问题

【获取样式】

css(propertyName)

  css(propertyName)方法用来获取匹配元素集合中的第一个元素的样式属性的计算值

<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<span id="result"></span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script>
$("div").click(function () {
  $("#result").html("背景颜色是 " + $(this).css("background-color"));
});
</script>

  [注意]简写速写的CSS属性(如:margin,background,border)不支持

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" style="margin-top:10px;">测试文字</div>
<script>
//chrome浏览器输出10px 0px 0px
//firefox和IE浏览器输出空字符串''
console.log( $('#test').css('margin'));
</script>

css(propertyNames)

  css(propertyNames)方法也可以接受一个或多个CSS属性组成的数组作为参数

  从jQuery 1.9开始, 传递一个CSS的样式属性的数组给.css()将返回属性-值配对的对象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" style="margin-top:10px;">测试文字</div>
<script>
//{width: "1904px", height: "18px", font-size: "16px"}
console.log( $('#test').css(['width','height','font-size']));
</script>

【设置样式】

css(propertyName,value)

  可以通过css(propertyName,value)方法进行样式设置

  [注意]从jQuery1.6开始,css()接受类似于animate()的相对值。相对值时以+=或者-=开头的字符串,表示递增或递减当前的值。如果一个元素的左padding是10px,.css( "padding-left", "+=15" )将返回总的左padding为25px

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" style="width:100px;background-color:grey">测试文字</div>
<script>
$('#test').mouseover(function(){
    $(this).css('color','red');
    $(this).css('width','+=100');
})
$('#test').mouseout(function(){
    $(this).css('color','green');
    $(this).css('width','-=100');
})
</script>

css(properties)

  css()方法设置样式时,允许以一个属性-值配对的对象作为参数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" style="width:100px;background-color:grey">测试文字</div>
<script>
$('#test').mouseover(function(){
    $(this).css({'color':'red','width':'+=100'});
})
$('#test').mouseout(function(){
    $(this).css({'color':'green','width':'-=100'});
})
</script>

  [注意]css()方法支持驼峰写法与中划线写法,内部做了容错的处理

  在驼峰写法中,属性名可以不使用引号包裹;但是在中划线写法中,必须用引号包裹

.css({'background-color': '#ffe', 'border-left': '5px solid #ccc'})
//等价于
.css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'})

css(propertyName,function(index, value))

  通过css()方法设置样式时,第二个参数可以是一个函数,this指向当前元素,index参数表示元素在匹配集合中的索引位置,html参数表示元素上原来的HTML内容。函数返回设置的值 

  [注意]当一个数只被作为值(value)的时候,jQuery会将其转换为一个字符串,并添在字符串的结尾处添加px,例如.css("width",50})与.css("width","50px"})一样

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" style="width:100px;background-color:grey">测试文字</div>
<script>
$('#test').mouseover(function(){
    $(this).css({width:function(index ,value){
        return parseFloat(value) * 1.2;
    },color: 'red'
});
})
$('#test').mouseout(function(){
    $(this).css({width:function(index ,value){
        return parseFloat(value) / 1.2;
    },color: 'green'});
})
</script>

删除样式

  使用css()方法也可以删除样式,当css()方法的样式属性的值为空字符串时,会从元素上移除该样式(若该属性存在的话)

  [注意]IE8-浏览器中,删除的简写属性,如border或background将完全删除该元素样式,不管是在样式表或<style>元素中

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
div{border-left:3px solid black;}
</style>
<body>
<div id="test" style="border-left:3px solid green;">内容</div>
<script>
$('#test').click(function(){
    $(this).css('border','');
})
</script>

// 0){
return;
}
if(select[i].getBoundingClientRect().top 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}

}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);

var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i

深入学习jQuery样式操作的更多相关文章

  1. 深入学习jQuery节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...

  2. jQUery 样式操作

    一.css样式操作的方法: 1..css("样式"):获得样式值,比如$("input").css("color")  获得input中字体 ...

  3. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  4. 深入学习jQuery特性操作

    × 目录 [1]获取特性 [2]设置特性 [3]删除特性 前面的话 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.操作特性的DOM方法主要有3个:getAttrib ...

  5. dom操作 属性操作 样式操作

    jQuery DOM操作 1 插入子元素 append('<img>') 插后面 被插入元素调用 appendTo('<img scr="...">') 新 ...

  6. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  7. 《从零开始学习jQuery》:用jQuery操作元素的属性与样式

    元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...

  8. jQuery学习之旅 Item3 属性操作与样式操作

    本节将Dom元素的操作:属性操作.样式操作.设置和获取HTML,文本和值.Css-Dom操作. 1.属性操作 <input type="text" name="us ...

  9. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

随机推荐

  1. netfilter分析

    转自:http://blog.sina.com.cn/s/blog_a31ff26901013n07.html 一.概述 1. Netfilter/IPTables框架简介 Netfilter/IPT ...

  2. 51nod 约数和(数论)

    题目链接: 约数和 基准时间限制:2 秒 空间限制:131072 KB 分值: 80 有三个下标从1到n的数组a.b.c. a数组初始全为0. b[i]=∑j|ia[j] c[i]=∑j|ib[j] ...

  3. URI--http://zh.wikipedia.org/wiki/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E6%A0%87%E5%BF%97%E7%AC%A6

    维基百科,自由的百科全书     在电脑术语中,统一资源标识符(Uniform Resource Identifier,或URI)是一个用于标识某一互联网资源名称的字符串. 该种标识允许用户对网络中( ...

  4. EL表达式学习

    EL表达式取值 1.EL表达式的语法格式很简单: 以前编写jsp代码时,如果要获取表单中的用户名,一般使用 <%=request.getParameter("name")%& ...

  5. ESP8266使用详解--基于Lua脚本语言

    这些天,,,,今天终于看到了希望,,,天道酬勤 先说实现的功能...让ESP8266连接无线网,然后让它建立服务器,,我的客户端连接上以后,发给客户端发数据模块打印到串口,,往ESP8266串口里发数 ...

  6. [转]使用sklearn进行集成学习——理论

    转:http://www.cnblogs.com/jasonfreak/p/5657196.html 目录 1 前言2 集成学习是什么?3 偏差和方差 3.1 模型的偏差和方差是什么? 3.2 bag ...

  7. zoj 1889 ones 数学

    Ones Time Limit: 2 Seconds      Memory Limit: 65536 KB Given any integer 0 <= n <= 10000 not d ...

  8. 使用Spring+Junit4.4进行测试

    http://nottiansyf.iteye.com/blog/345819 使用Junit4.4测试 在类上的配置Annotation @RunWith(SpringJUnit4ClassRunn ...

  9. es集群数据库~运维相关

    一 数据同步方案  1 ES-JDBC  不能实现删除同步操作.MYSQL如果删除,ES不会删除  2 logstash-input-jdbc  能实现insert update,但是仍然不能实现删除 ...

  10. shell编程变量介绍与表达式详解

    shell变量简介 变量是任何一种编程语言都必不可少的组成部分,变量用来存放各种数据.脚本语言在定义变量时通常不需要指明类型,直接赋值就可以,Shell 变量也遵循这个规则. 在 Bash shell ...