How to remove style part of jquery-Front-end Q&A-php.cn

How to remove style part of jquery

青灯夜游

Release： 2022-09-09 19:05:34

Original

5605 people have browsed it

Two methods to remove style: 1. Use the removeAttr() function to remove the style set by the style attribute, the syntax is "$(selector).removeAttr("style");". 2. Use the empty() function to clear the content of the style tag and remove the style tag style. The syntax is "$("style").empty();".

How to remove style part of jquery

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

In HTML, style styles are divided into two situations:

1. The style contained in the style attribute

The style attribute is the core attribute of HTML. Use To specify an inline style for an element. The

style attribute will override other global styles, such as those defined in the
2. The style contained in the style tag

The style tag defines the style information of the HTML document.

In the style element, you can specify how the HTML document is rendered in the browser.

JQuery has different removal methods for different situations.

1. Use the jquery removeAttr() method to remove the style attribute

The removeAttr() method is used to remove attributes from selected elements.

Syntax:

$(selector).removeAttr(attribute)

Copy after login

attribute: required. Specifies the attributes to remove from the specified element.

Example: Remove the style attribute of the first p element

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p:first").removeAttr("style");
				});
			});
		</script>

	</head>

	<body>
		<h1>这是一个大标题</h1>
		<p style="font-size: 120%;color: blue;background-color: yellow;">这是一个段落。</p>
		<p style="font-size: 120%;color: blue;background-color: yellow;">这是另一个段落。</p>
		<button>移除第一个 p 元素的style属性</button>
	</body>

</html>

Copy after login

How to remove style part of jquery

##2. Use the jquery empty() method to clear the style tag Content

empty() method removes all child nodes and content of the selected element, but does not delete the selected element.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("style").empty();
				});
			});
		</script>
		<style>
			h1{
				color: coral;
			}
			p{
				font-size: 120%;
				color: blue;
				background-color: yellow;
			}
		</style>
	</head>

	<body>
		<h1>这是一个大标题</h1>
		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>
		<button>清空style标签样式</button>
	</body>

</html>

Copy after login

How to remove style part of jquery

[Recommended learning:

jQuery video tutorial, web front-end development video]

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