Home > Web Front-end > JS Tutorial > body text

How to set css style for elements in jquery

青灯夜游
Release: 2021-10-12 16:41:40
Original
9543 people have browsed it

Setting method: 1. Use the css() method, the syntax "$(selector).css("Attribute name", "Attribute value")"; 2. Use the attr() method, the syntax "$( selector).attr("style","Attribute name 1: attribute value 1; attribute name 2: attribute value 3;...")".

How to set css style for elements in jquery

The operating environment of this tutorial: windows7 system, jquery1.7.2 version, Dell G3 computer.

Method 1: Use the css() method

The css() method can set one or more style attributes of the matching element. Syntax:

$(selector).css("属性名", "属性值")
Copy after login

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	</head>
	<body>
		<div id="dome">欢迎来到PHP中文网!</div>
		<script type="text/javascript">
			$("#dome").css("color", "red");
		</script>
	</body>
</html>
Copy after login

Rendering:

How to set css style for elements in jquery

Method 2: Use the attr() method

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

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

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	</head>
	<body>
		<div id="dome">欢迎来到PHP中文网!</div>
		<script type="text/javascript">
			$("#dome").attr("style", "color:pink;");
		</script>
	</body>
</html>
Copy after login

Rendering:

How to set css style for elements in jquery

Related video tutorial recommendation: jQuery Tutorial(video)

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

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template