Home  >  Article  >  Web Front-end  >  How to change style in jquery

How to change style in jquery

青灯夜游
青灯夜游Original
2023-01-28 16:19:1410764browse

How to change the style of jquery: 1. Use css() to set a new style for the specified element. The syntax "$(selector).css({"Attribute name 1":"Attribute value 1" ,"Attribute name 2":"Attribute value 2",...})"; 2. Use attr() to set the style attribute value of the specified element, the syntax is "$(selector).attr("style"," Attribute name 1: attribute value 1; attribute name 2: attribute value 3;...")".

How to change style in jquery

The operating environment of this tutorial: windows7 system, jquery3.6 version, Dell G3 computer.

There are two ways to change the style of jquery:

  • Modify it through the css() method

  • Modify by attr() method

Method 1: Use css() method

css() method can set matching elements One or more style attributes.

Just use the css() method to set a new style

Syntax:

$(selector).css({"属性名1":"属性值1","属性名2":"属性值2",...})

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.3.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("div").css({"color":"red","background-color":"papayawhip","font-size":"25px"});
				});
			});
		</script>
		<style>
			.tr1 {
				color: green;
			}
			.tr2 {
				color: red;
				background-color: blanchedalmond;
			}
		</style>
	</head>

	<body class="ancestors">
		<div style="color: yellow;background-color:powderblue;">欢迎来到PHP中文网!</div><br>
		<button>改变div元素的style样式</button>
	</body>

</html>

How to change style in jquery

Method 2: Use the attr() method

attr() method sets or returns the attribute value of the selected element.

You only need to use the attr() method to set the style attribute value of the element.

Grammar:

$(selector).attr("style","属性名1:属性值1;属性名2:属性值3;...")

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.3.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("div").attr("style", "color:pink;background-color:peru;font-size: 18px;");
				});
			});
		</script>
		<style>
			.tr1 {
				color: green;
			}
			.tr2 {
				color: red;
				background-color: blanchedalmond;
			}
		</style>
	</head>

	<body class="ancestors">
		<div style="color: red;background-color:papayawhip;">欢迎来到PHP中文网!</div><br>
		<button>改变div元素的style样式</button>
	</body>

</html>

How to change style in jquery

##[Recommended learning:

jQuery video tutorial, web front-end video

The above is the detailed content of How to change style in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn