使用 javascript 脚本化 CSS 是一个系列,包括、、、、和这六部分。而 jQuery 也实现了脚本化 CSS 的功能,提供了更为简单易用的方法
前面介绍过 jQuery 的特性操作,可以通过进行样式设置
.cB">
- .cB "><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 对象才可以使用
.cB">
- .cB "><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) 方法为每个匹配元素增加一个或多个样式名,如果值已存在,则不添加
.cB">
- .cB "><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 指向匹配元素集合中的当前元素
.cB">
- .cB "><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() 方法不带参数时,将删除全部类名
.cB">
- .cB "><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]) 方法用来删除参数中指定的一个或多个类名
.cB">
- .cB "><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 时,会导致错误
.cB">
- .cB "><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() 方法没有参数时,将删除或还原全部类名
.cB">
- .cB "><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)方法在匹配的元素集合中的每个元素上切换的一个或多个 (用空格隔开) 样式类名
.cB">
- .cB "><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
.cB">
- $('#foo').toggleClass(className, addOrRemove);
- //等价于
- if (addOrRemove) {
- $('#foo').addClass(className);
- } else {
- $('#foo').removeClass(className);
- }
- .cB "><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() 可以接收一个函数作为参数,该函数用来返回在匹配的元素集合中的每个元素上用来切换的样式类名,接收元素的索引位置和元素旧的样式类作为参数
.cB">
- .cB "><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
.cB">
- .cB "><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) 方法用来获取匹配元素集合中的第一个元素的样式属性的计算值
div">
- div "><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>
来源: http://www.cnblogs.com/xiaohuochai/p/5922049.html