Dynamic website designing is primarily focused on changing look and feel of web pages as the user does some activity. jQuery CSS method is a great help to set or get the CSS properties of web page elements.
Using jQuery CSS method to access Properties’ Values
The CSS method is always used with an element selector. When called for a specific selector either using name, class or ID, it returns the value of the property passed as parameter in parenthesis.
This method can also be used to get multiple properties’ values. Multiple CSS properties can be fetched with CSS method by listing the names of the properties as an array. When a CSS property not set using style is accessed by jQuery CSS, it returns “undefined”.
Accessing Single CSS property
var var_name=$(element name/class/ID). CSS(“property_name”)
var src= $("#src").css("font-size");Accessing Multiple CSS properties
To access multiple CSS properties with one CSS method call, the property names are enclosed in square brackets ([]) separated by commas. All property names must be enclosed separately in double quotes. The output of call to CSS method in this war returns an array. This array is composed on propserty names listed in square brackets as keys and their corresponding values of the element.
var array_name=$(element name/class/ID). CSS([“property_name1”, “property_name2”, “property_name3”,….])
var src= $("#src").css(["background-color","color","font-size","font-size"]);Using jQuery CSS method to set Properties’ Values
The CSS method is used with an element selector to set CSS property of an element. It is called for a specific selector either using its Name, Class or ID. It sets the value of the property mentioned in parenthesis with the value following it after a comma.
This method can also be used to set multiple properties. Multiple CSS properties can be set with one call of CSS method by listing the names of the properties and their values joined by colon (:).
Setting Single CSS Property
$(element name/class/ID). CSS(“property_name”,”value”)
$("#tar").css("font-size",src);src in above example is the variable storing the font-size property value using CSS method in first code snippet in this post.
Setting Multiple CSS Properties
To set multiple CSS properties with one CSS method call, the property names are followed by a colon(: ) and its value. These property and value pairs are separated by commas and whole set is enclosed in curly parenthesis “{}”. All property names and their values being set must be enclosed separately in double quotes.
$(element name/class/ID). CSS({“property_name1”:”value”, “property_name2”:value2, “property_name3”:value3,….])
$("#tar").css({"background-color":src["background-color"],"color":src["color"],"font-size":src["font-size"],"font-size":src["font-size"]});src in above example is the array storing the background-color, color, font-family and font-size property value using CSS method in second code snippet in this post.
Example
In this example, we have created an interface to explain how the CSS method of jQuery is used to change style properties.
Two buttons on top are created as source and target. Below them five buttons are created. On clicking them the mentioned change is executed on the source and target buttons. The changes are interchanging their background color, text color, font family and font size. A Flip All buttons interchanges all these CSS properties in one go.
A click function for each action button is defined in jQuery script. The click function is associated with jQuery selector using the action button’s ID attribute. The current CSS property values are stored in local variables in the click functions using CSS method. The values stored in these variables are assigned to CSS property of the source and target buttons. This way they are interchanged using CSS method for setting properties.
Code:
<!DOCTYPE html>
<html>
<head>
<!--style sheet for how to create calculator program-->
<style>
.ui {
background-color: white;
width:220px;
height:280px;
border-style:solid;
border-width:2px;
padding:10px;
}
.srcBtn {
background-color: red;
color: maroon;
width: 100px;
height: 100px;
font-family: Verdana, Calibri, monospace;
font-size:20px
}
.tarBtn {
background-color: green;
color:white;
font-family: courier, Helvetica, sans-serif;
font-size:22px;
width: 100px;
height: 100px;
}
.shufBtn {
background-color: blue;
color:white;
font-family: Tahoma;
font-size:12px;
width: 100px;
height: 50px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#color").click(function(){
var src= $("#src").css("background-color");
var tar=$("#tar").css("background-color");
$("#tar").css("background-color",src);
$("#src").css("background-color",tar);
});
$("#text").click(function(){
var src= $("#src").css("color");
var tar=$("#tar").css("color");
$("#tar").css("color",src);
$("#src").css("color",tar);
});
$("#ffam").click(function(){
var src= $("#src").css("font-family");
var tar=$("#tar").css("font-family");
$("#tar").css("font-family",src);
$("#src").css("font-family",tar);
});
$("#fsize").click(function(){
var src= $("#src").css("font-size");
var tar=$("#tar").css("font-size");
$("#tar").css("font-size",src);
$("#src").css("font-size",tar);
});
$("#all").click(function(){
var src= $("#src").css(["background-color","color","font-size","font-size"]);
var tar= $("#tar").css(["background-color","color","font-size","font-size"]);
$("#tar").css({"background-color":src["background-color"],"color":src["color"],"font-size":src["font-size"],"font-size":src["font-size"]});
$("#src").css({"background-color":tar["background-color"],"color":tar["color"],"font-size":tar["font-size"],"font-size":tar["font-size"]});
});
});
</script>
</head>
<body style="font-family:arial">
<button class="srcBtn" id="src" > Source</button>
<button class="tarBtn" id="tar" >Target</button><br><br>
<button class="shufBtn" id="color" >Flip Color</button>
<button class="shufBtn" id="text" >Flip Text Color</button><br>
<button class="shufBtn" id="ffam" >Flip font Family</button>
<button class="shufBtn" id="fsize" >Flip font size</button><br>
<button class="shufBtn" id="all" >Flip All </button>
</body>
</HTML>
Be First to Comment