English | 正體中文 | 简体中文

jQuery CSS操控


增加css类别
.addClass()

//原HTML
<div>test</div>

//用jQuery.addClass()之后
$("div").addClass("class1")

//HTML会变成
<div class="class1">test</div>


移除css类别
.removeClass()

//原HTML
<div class="class1 blue">test</div>

//用jQuery.removeClass()之后
$("div").removeClass("class1")

//HTML会变成
<div class="blue">test</div>

//==============

//原HTML
<div class="green hover">test</div>

//用jQuery.removeClass()之后
$("div").removeClass()

//HTML会变成
<div>test</div>

测试css类别是否存在
.hasClass()
//原HTML
<div class="class1">test</div>

// 用jQuery.hasClass()测试之后 
$("div").hasClass("class1")  -> 回传 true 
$("div").hasClass("green")   -> 回传 false

切换css类别
.toggleClass()
//原HTML
<div class="class1">test</div>

//用jQuery.toggleClass()之后
$("div").toggleClass("highlight")

//HTML会变成
<div class="class1 highlight">test</div>

//再用jQuery.toggleClass()一次之后
$("div").toggleClass("highlight")

//HTML会变成
<div class="class1">test</div>


范例
div1
       

范例程式码Expand
<!-- HTML -->
<style>
#example-section44 .ex1{        
    border:1px solid black;
    width:100px;height:60px;
    text-align:center;    
}

#example-section44 .blue{    
    color:blue;font-weight:bold;
    font-size:18px;
    border:5px dotted blue;
}
</style>
<div id="example-section44">    
    <div id="ele441" class="ex1">div1</div>    
    <button id="ele442" type="button">Add class 'blue'</button>&nbsp;
    <button id="ele443" type="button">Remove class 'blue'</button>&nbsp;
    <button id="ele444" type="button">Test if has class 'blue'</button>&nbsp;
    <button id="ele445" type="button">Toggle class 'blue'</button>&nbsp;
</div>



<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
    $("#example-section44 button").click(function(){
        var id = $(this).attr("id");

        if(id == "ele442"){
            $("#ele441").addClass("blue");
        }else if(id == "ele443"){
            $("#ele441").removeClass("blue");
        }else if(id == "ele444"){
            alert($("#ele441").hasClass("blue"));
        }else if(id == "ele445"){
            $("#ele441").toggleClass("blue");
        }
    });
});
</script>




控制css
.css()

//原HTML
<div>test</div>

//用jQuery.css()之后
$("div").css("background-color", "red");

//HTML会变成
<div style="background-color:red">test</div>

//================

//原HTML
<div style="height:100px">test</div>

//用jQuery.css()之后
$("div").css("height", "250px");

//HTML会变成
<div style="height:250px">test</div>


范例
        

范例程式码Expand
<!-- HTML -->
<style>
</style>
<div id="example-section45">    
    <div id="ele451" style="border:1px solid black;width:200px;height:100px;"></div>    
    <button id="ele452" type="button">Change style 'height'</button>&nbsp;
    <button id="ele453" type="button">Change style 'background-color'</button>&nbsp;
    <button id="ele454" type="button">Change style 'font-size'</button>&nbsp;&nbsp;
    <button id="ele455" type="button">Reset</button>&nbsp;
</div>



<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
    $("#ele451").text($("#ele451").attr("style"));

    $("#example-section45 button").click(function(){
        var id = $(this).attr("id");

        if(id == "ele452"){
            $("#ele451").css("height", "200px");
        }else if(id == "ele453"){
            $("#ele451").css("background-color", "orange");
        }else if(id == "ele454"){
            $("#ele451").css("font-size", "14px");
        }else if(id == "ele455"){
            $("#ele451").attr("style", "border:1px solid black;width:200px;height:100px;");
        }

        $("#ele451").text($("#ele451").attr("style"));
    });
});
</script>


© 2012 PureExample.com contact