jquery에서 태그 속성 값을 바꾸는 방법-프런트엔드 Q&A-php.cn

jquery에서 태그 속성 값을 바꾸는 방법

青灯夜游

풀어 주다： 2023-01-04 09:15:16

원래의

2697명이 탐색했습니다.

태그 속성 값을 대체하는 두 가지 방법: 1. attr()을 사용하여 속성 값을 대체합니다. 구문 "$("img").attr({속성 1: "새 값", 속성 2: "새 값 ".. .});". 2. 속성 값을 바꾸려면 prop()을 사용합니다. 구문은 "$("img").prop({속성 1: "새 값", 속성 2: "새 값"...});"입니다.

jquery에서 태그 속성 값을 바꾸는 방법

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6 버전, Dell G3 컴퓨터.

HTML 태그의 속성

HTML의 태그는 키워드와 같습니다. 예를 들어

태그는 단락을 나타냅니다. 두꺼운 단락을 나타냅니다. 태그에 따라 브라우저는 태그의 콘텐츠를 다양한 방식으로 표시합니다.

일반적으로 HTML 태그는 시작 태그, 속성, 콘텐츠 및 종료 태그로 구성됩니다. 태그 이름은 대소문자를 구분하지 않지만, 대부분의 속성 값은 아래와 같이 대소문자를 구분해야 합니다. :

	属性
	↓
<div class="foo">PHP中文网</div>
 ↑               ↑        ↑
开始标签          内容     结束标签

로그인 후 복사

속성은 HTML 태그일 수 있으며 추가 정보를 제공하거나 HTML 태그를 수정할 수 있습니다. 시작 태그에 속성을 추가해야 하며 구문 형식은 다음과 같습니다.

attr="value"

로그인 후 복사

attr은 속성 이름을 나타내고 value는 속성 값을 나타냅니다. 속성 값은 큰따옴표 " " 또는 작은따옴표 ' '로 묶어야 합니다.

속성값은 큰따옴표와 작은따옴표 모두 가능하지만, 표준화와 전문성을 위해 최대한 큰따옴표를 사용해주세요.

태그에는 속성이 없거나 하나 이상의 속성이 있을 수 있습니다.

jquery가 태그 속성 값을 수정하는 두 가지 방법

방법 1: attr()을 사용하여 속성 값을 수정합니다.

attr() 메서드는 선택한 요소의 속성 값을 설정할 수 있습니다.

대체 구문:

//单个属性
$("div").attr("属性名","新属性值");

//多个个属性
$("div").attr({属性1:"新值",属性2:"新值"....});

로그인 후 복사

예 1: div 태그의 스타일 속성 값 수정

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
		$(document).ready(function() {
			$("button").click(function() {
				$("div").attr("style","height:100px;background-color: #AFEEEE;");
			});
		});
		</script>
	</head>
	<body>

		<div style="height: 150px;border: 1px solid red;"></div>
		<br>
		<button>修改div的属性值</button>
	</body>
</html>

로그인 후 복사

jquery에서 태그 속성 값을 바꾸는 방법

예 2: 너비 및 높이 속성 수정

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
					$("button").click(function() {
						$("img").attr({width:"400",height":"320"});
					});
			});
		</script>
	</head>

	<body>
		<img src="img/1.jpg" alt="多肉" width="200"    style="max-width:90%"><br><br>
		<button>修改width和height属性值</button>
	</body>

</html>

로그인 후 복사

jquery에서 태그 속성 값을 바꾸는 방법

방법 2: prop 사용 () 속성 값 수정

attr() 메서드와 마찬가지로 prop() 메서드도 선택한 요소의 속성 값을 설정할 수 있습니다.

구문 수정:

//单个属性
$("div").prop("属性名","新值");
//多个个属性
$("div").prop({属性1:"新值",属性2:"新值"....});

로그인 후 복사

예 1: div 태그 클래스 속성 수정

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
		$(document).ready(function() {
			$("button").click(function() {
				$("div").attr("class","box2");
			});
		});
		</script>
		<style>
			.box1{
				height: 150px;
				background-color: #AFEEEE;
			}
			.box2{
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>

		<div class="box1"></div>
		<br>
		<button>修改div的属性值</button>
	</body>
</html>

로그인 후 복사

jquery에서 태그 속성 값을 바꾸는 방법

예 2: src 및 alt 속성 수정

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
					$("button").click(function() {
						$("img").prop({src:"img/4.jpg",alt:"晚霞"});
					});
			});
		</script>
	</head>

	<body>
		<img src="img/1.jpg" alt="多肉" width="300"><br><br>
		<button>修改src和alt属性</button>
	</body>

</html>

로그인 후 복사

jquery에서 태그 속성 값을 바꾸는 방법