前面的言辞

  使用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)方法用来抱匹配元素集合中之第一只元素的体属性的计算值。要注意的是,这里取之是计量样式,即类似于本生javascript的getComputedStyle或currentStyle

<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>

<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>

相关文章

网站地图xml地图