How to change multiple css attributes with jquery-Front-end Q&A-php.cn

How to change multiple css attributes with jquery

青灯夜游

Release： 2022-06-02 15:33:51

Original

2667 people have browsed it

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...")".

How to change multiple css attributes with jquery

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":"新值",...})

Copy after login

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>

Copy after login

How to change multiple css attributes with jquery

##2. Use attr() to change multiple attributes

attr() method can set the attributes and values of the selected element.

$(selector).attr("style","属性名:新值,属性名:新值,...");

Copy after login

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;"); 
		
	});
});

Copy after login

How to change multiple css attributes with jquery

[Recommended learning:

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!