This example describes the use of the CSS () method of jquery. Share to everyone for your reference. The specific analysis is as follows:
This method returns or sets one or more style properties of the matching element.
Syntax structure:
Grammar one:
Gets the property value of the specified style property.
takes the Style property name as an argument. For example:
Copy Code code as follows:
The above code can get the font color value of the div.
Code instance:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title>css () function-cloud-dwelling community </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>
<body>
<div> Cloud-dwelling community </div>
<button> Click to view Effect </button>
</body>
Click here button to eject the font color values set for div.
Syntax Two:
sets a Style property value for all matching elements. For example:
Copy Code code as follows:
$ ("div"). CSS ("Color", "red")
The above code can be all div font color set to red, we should pay attention to the writing format, attribute names and attribute values to be wrapped in a bank, the middle with a comma split. If the property value is a number, you can remove the quotation marks, for example:
Copy Code code as follows:
$ ("div"). CSS ("Font-size", 20)
Instance code:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title>css () function-cloud-dwelling community </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>
<body>
<div> Carefully review changes </div>
<div> Carefully review changes </div>
<button> Click to view Effect </button>
</body>
In the above code, click the button to set the text color in the div to red.
Syntax Three:
Use the property name/value object to set the style properties for all matching elements. For example:
Copy Code code as follows:
$ ("div"). css ({color: "Red"})
The above code can set the font color of all div elements to red. You can also set multiple sets of properties for a matching element at once by using the property name/value object. For example:
Copy Code code as follows:
$ ("div"). css ({color: "Red", fontsize:20})
The above code can set the font color and size in the div to red and 20px respectively, set the font size when the default unit is PX. You should pay attention to the format, this time attribute names cannot be wrapped in quotes, attribute values need to be wrapped in quotes, but if the property value is a number can omit quotation marks. The special note is that font-size and Background-color attribute names in the middle to remove the middle bar (-), while the second word should be capitalized, such as Font-size to write FontSize, Backgroun-color to write BackgroundColor.
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title>css () function-cloud-dwelling community </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>
<body>
<div> Carefully review changes </div>
<div> Carefully review changes </div>
<button> Click to view Effect </button>
</body>
In the above code, click the button to modify the text color and font size in the div.
I hope this article will help you with your jquery programming.
