Home >Web Front-end >Front-end Q&A >How to change multiple css attributes with jquery
How to change multiple css attributes with jquery
- 青灯夜游Original
- 2022-06-02 15:33:512664browse
Change method: 1. Use css() to set a new value for the style attribute. The syntax is "element object.css({"property name":"new value","property name":"new value". ..})"; 2. Use attr() to set the new value, the syntax is "element object.attr("style","Attribute name: new value, attribute name: new value...")".
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
Two methods for jquery to change multiple css properties
Use css() to change multiple properties
Use attr() to change multiple attributes
1. Use css() to change multiple attributes
css() method Returns or sets one or more style properties of the matched element.
Set multiple CSS property/value pairs
$(selector).css({"属性名1":"新值","属性名2":"新值",...})Set the "name/value pair" object as the style attribute of all matching elements.
This is the best way to set a large number of style properties on all matching elements.
Example: Change the color attribute and font-size attribute
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").on("click", function() {
$("div").css({"color":"red","font-size":"20px"});
});
});
</script>
</head>
<body class="ancestors">
<div style="color: black;font-size: 14px;">测试文本</div>
<button>改变color属性和font-size属性</button>
</body>
</html>
##2. Use attr() to change multiple attributes
attr() method can set the attributes and values of the selected element.$(selector).attr("style","属性名:新值,属性名:新值,...");When using attr() to set the style attribute to an element, the value of the attribute is one or more styles. Example: $(document).ready(function() {
$("button").on("click", function() {
$("div").attr("style","color: green;font-size: 20px;");
});
});
jQuery video tutorial, web front-end video]
The above is the detailed content of How to change multiple css attributes with jquery. For more information, please follow other related articles on the PHP Chinese website!