Example of jQuery's css of method usage
- 2020-05-09 18:09:28
- OfStack
This article illustrates the use of the css() method for jQuery as an example. Share with you for your reference. The specific analysis is as follows:
This method returns or sets one or more style attributes of the matching element.
Grammatical structure:
Grammar 1:
Gets the property value of the specified style property.
Takes the name of the style property as a parameter. Such as:
$("div").css("color")
The above code can get the font color value of div.
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title>css() function - The home of the script </title>
<style type="text/css">
div{
color:blue;
background-color:green;
width:300px;
height:300px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert($("div").css("color"));
})
})
</script>
</head>
<body>
<div> The home of the script </div>
<button> Click to view </button>
</body>
</html>
Click the button here to bring up the font color value set for div.
Syntax 2:
Set 1 style attribute value for all matched elements. Such as:
$("div").css("color","red")
The above code can set the font color of all div to red, please note the writing format, property name and property value should be wrapped in bank and separated by comma. You can remove the quotes if the attribute value is a number, for example:
$("div").css("font-size",20)Example code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title>css() function - The home of the script </title>
<style type="text/css">
div{
color:blue;
background-color:green;
width:100px;
height:100px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").css("color","red");
$("div").css("font-size",20);
})
})
</script>
</head>
<body>
<div> Look at the changes </div>
<div> Look at the changes </div>
<button> Click to view </button>
</body>
</html>
In the code above, click the button to set the text color in div to red.
Grammar:
Use the property name/value object to set the style properties for all matched elements. Such as:
$("div").css({color:"red"})
The above code sets the font color of all div elements to red. You can also use the property name/value object approach to set multiple groups of properties once for matching elements. Such as:
$("div").css({color:"red",fontSize:20})The above code can set the font color and size in div to red and 20px respectively. When setting the font size without unit, the default unit is px. Note the formatting, you can't wrap the attribute name in quotation marks, you need to wrap the attribute value in quotation marks, but you can leave out the quotation marks if the attribute value is a number. Note in particular that for property names like font-size and background-color, the middle dash (-) should be removed and the first letter of the second word should be capitalized. For example, font-size should be written as fontSize and backgroun-color should be written as backgroundColor.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title>css() function - The home of the script </title>
<style type="text/css">
div{
color:blue;
background-color:green;
width:100px;
height:100px;
margin-top:5px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").css({color:"red",fontSize:20,backgroundColor:"blue"});
})
});
</script>
</head>
<body>
<div> Look at the changes </div>
<div> Look at the changes </div>
<button> Click to view </button>
</body>
</html>
In the code above, click the button to change the text color and font size in div.
I hope this article has helped you with your jQuery programming.