How to modify min-height style in jquery-Front-end Q&A-php.cn

How to modify min-height style in jquery

青灯夜游

Release： 2022-04-20 12:19:10

Original

2243 people have browsed it

Modification method: 1. Use css() to set a new style, the syntax is "$(element).css("min-height","new value")"; 2. Use attr(), by setting style attribute to add a new style, the syntax is "$(element).attr("style","min-height:new value")".

How to modify min-height style in jquery

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

min-height attribute is used to set the minimum height of an element. This property does not include padding, borders, or margins!

So how to modify the min-height style using jquery?

In jquery, it supports multiple ways to modify the min-height style. Let me introduce it to you below.

Method 1: Use the css() method

The css() method returns or sets one or more style attributes of the matching element.

Use the css() method to directly add a new value to the min-height attribute and set a new style.

Example:

<!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() {
					$("p").css("min-height","100px");
				});
			});
		</script>
		<style>
			p{
				min-height:50px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>

		<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
		<button>修改min-height样式</button>

	</body>

Copy after login

How to modify min-height style in jquery

Method 2: Use the attr() method

attr() method to set or Returns the attribute value of the selected element.

You can use this method to set the style attribute and add a new inline style to overwrite the old style.

Example:

<!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() {
					$("p").attr("style","min-height:100px");
				});
			});
		</script>
		<style>
			p{
				min-height:50px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>

		<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
		<button>修改min-height样式</button>

	</body>

Copy after login

How to modify min-height style in jquery

[Recommended learning: jQuery video tutorial, web front-end video]

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