Home > Article > Web Front-end > How to remove float attribute in jquery

How to remove float attribute in jquery

青灯夜游Original: 2022-05-16 16:00:201462browse

Two methods: 1. Use css() to set the float attribute, change the value to "none", and the syntax is "element.css("float","none")". 2. Use attr() to control the style attribute and set a new style. The syntax is "element.attr("style","float:none")".

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

The float attribute is used to specify whether a box (element) should float.

When the value of this attribute is none, it will have no effect (the element will not float and will be displayed where it appears in the text.).

In jquery, you can remove the float attribute by setting the value of this attribute to none.

Two methods are introduced below:

1. Use the css()

css() method to return or set one or more matching elements. style attributes.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("img").css("float","none");
				});
			});
		</script>
		<style>
		img 
		{
			float:right;
		}
		</style>
	</head>

	<body class="ancestors">
		<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
		<p>
		<img  src="img/1.jpg"    style="max-width:90%"  style="max-width:90%" / alt="How to remove float attribute in jquery" >
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		</p>
		<button>去除float</button>
	</body>

</html>

How to remove float attribute in jquery

2. Use attr()

Use the attr() method to control the style attribute and set the new float style

$(document).ready(function() {
	$("button").click(function() {
		$("img").attr("style","float:none");
	});
});

How to remove float attribute in jquery

【Recommended learning: jQuery video tutorial, web front-end video】

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

jquery css Float

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

Previous article：How to change input attributes in jqueryNext article：How to change input attributes in jquery

See more

How to remove float attribute in jquery

Related articles