jQuery CSS Manipulation

.addClass()
//Original HTML
<div>test</div>

//after jQuery.addClass()
$("div").addClass("class1")

//Yields HTML
<div class="class1">test</div>

.removeClass()
//Original HTML
<div class="class1 blue">test</div>

//after jQuery.removeClass()
$("div").removeClass("class1")

//Yields HTML
<div class="blue">test</div>

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

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

//after jQuery.removeClass()
$("div").removeClass()

//Yields HTML
<div>test</div>

.hasClass()
//Original HTML
<div class="class1">test</div>

//after jQuery.hasClass()
$("div").hasClass("class1")  -> return true 
$("div").hasClass("green")   -> return false

.toggleClass()
//Original HTML
<div class="class1">test</div>

//after jQuery.toggleClass()
$("div").toggleClass("highlight")

//Yields HTML
<div class="class1 highlight">test</div>

//after jQuery.toggleClass() AGAIN
$("div").toggleClass("highlight")

//Yields HTML
<div class="class1">test</div>
ExampleCSS class manipulation
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

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

<!-- HTML -->
<a name="#addclass-removeclass-hasclass-toggleclass"></a>
<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>


.css()
//Original HTML
<div>test</div>

//after jQuery.css()
$("div").css("background-color", "red");

//Yields HTML
<div style="background-color:red">test</div>

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

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

//after jQuery.css()
$("div").css("height", "250px");

//Yields HTML
<div style="height:250px">test</div>
ExampleCSS manipulation
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

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

<!-- HTML -->
<a name="#css-example"></a>
<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>


comments powered by Disqus