jquery Multiple Methods of Setting css Style of Summary
- 2021-07-22 08:44:37
- OfStack
Summary of various methods of setting css style, jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<ul>
<li> Multiple brothers 1</li>
<li> Multiple brothers 2</li>
<li> Multiple brothers 3</li>
<li> Multiple brothers 4</li>
<li> Multiple brothers 5</li>
<li> Multiple brothers 6</li>
<li> Multiple brothers 7</li>
<li> Multiple brothers 8</li>
<li> Multiple brothers 9</li>
</ul>
<ul id="ul">
<li> Multiple brothers 1</li>
<li> Multiple brothers 2</li>
<li> Multiple brothers 3</li>
<li> Multiple brothers 4</li>
<li> Multiple brothers 5</li>
<li> Multiple brothers 6</li>
<li> Multiple brothers 7</li>
<li> Multiple brothers 8</li>
<li> Multiple brothers 9</li>
</ul>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script>
// Settings css Attribute
$("ul").css("backgroundColor","red");
// Set multiple values at the same time
$("ul").css({
backgroundColor: "yellow",
fontSize: "16px"
});
// Interval display does not 1 The colour of the sample
$("#ul li").css("color",function(index,value){
console.log(index); // Sequence number of the current element
console.log(value); // The value of the style to be set for the current element
if(index%2==0){
return "red";
}else{
return "blue";
}
});
</script>
</body>
</html>