집 > 기사 > 웹 프론트엔드 > jquery에서 요소 스타일을 조작하는 방법은 무엇입니까?

jquery에서 요소 스타일을 조작하는 방법은 무엇입니까?

青灯夜游원래의: 2022-05-11 20:17:243934검색

스타일 작동 방법: 1. css(), 요소의 스타일 속성 설정 2. height(), 요소의 높이 설정 3. width(), 요소의 너비 설정; (), 요소의 상대적 위치를 설정합니다. 스크롤 막대의 왼쪽에 대한 오프셋입니다. 5. scrollTop(), 스크롤 막대의 상단을 기준으로 요소의 오프셋을 설정합니다. 6. attr(), 요소의 id, class 및 스타일 속성을 제어하여 스타일을 제어합니다. 7. prop(), 요소의 스타일 및 기타 속성을 제어하여 스타일을 조작합니다.

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

요소 스타일을 직접 조작하는 jquery 방법

CSS 속성	Description
css()	일치하는 요소의 스타일 속성을 설정하거나 반환합니다.
height()	일치하는 요소의 높이를 설정하거나 반환합니다.
offset()	문서를 기준으로 첫 번째로 일치하는 요소의 위치를 반환합니다.
position()	상위 요소를 기준으로 첫 번째로 일치하는 요소의 위치를 반환합니다.
scrollLeft()	스크롤 막대의 왼쪽을 기준으로 일치하는 요소의 오프셋을 설정하거나 반환합니다.
scrollTop()	스크롤 막대 상단을 기준으로 일치하는 요소의 오프셋을 설정하거나 반환합니다.
width()	일치하는 요소의 너비를 설정하거나 반환합니다.

1.css()

CSS 속성 값 구문 반환:

$(selector).css(name)

CSS 속성 구문 설정:

$(selector).css(name,value)

2. height 구문 반환:

$(selector).height()

높이 구문 설정 :

$(selector).height(length)

3. Width()

너비를 반환하는 구문:

$(selector).width()

너비를 설정하는 구문:

$(selector).width(length)

예: 요소 스타일 조작 - 요소 너비 수정

1. width () 메서드 사용

<!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").width("200px");
				});
			});
		</script>
	</head>
	<body>

		<img  src="1.jpg"    style="max-width:90%"/ alt="jquery에서 요소 스타일을 조작하는 방법은 무엇입니까?" ><br>
		<button>修改元素的宽度</button>
	</body>
</html>

jquery에서 요소 스타일을 조작하는 방법은 무엇입니까? 2. css() 메소드를 사용하여

$(document).ready(function() {
	$("button").click(function() {
	 $("img").css("width","250px");
	});
});

jquery에서 요소 스타일을 조작하는 방법은 무엇입니까?

jquery 메소드를 사용하여 요소 스타일을 간접적으로 조작

jquery에서는 요소 스타일을 조작하여 간접적으로 조작할 수 있습니다.

Method DescriptionaddClass()일치하는 요소에 지정된 클래스 이름을 추가합니다. attr()일치하는 요소의 속성과 값을 설정하거나 반환합니다. prop()선택한 요소의 속성/값을 설정하거나 반환합니다. removeAttr()일치하는 모든 요소에서 지정된 속성을 제거합니다. removeClass()일치하는 모든 요소에서 전체 또는 지정된 클래스를 제거합니다. toggleClass()일치하는 요소에서 클래스를 추가하거나 제거합니다. 예: attr()을 사용하여 스타일 추가

attr() 메서드를 사용하여 요소의 스타일 속성을 설정할 때 해당 요소에 CSS 스타일을 추가할 수 있습니다.

<!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() {
					// $("div").attr({"style":"border: 5px solid paleturquoise;"});
					$("div").attr("style", "border: 5px solid paleturquoise;width: 200px;");
				});
			});
		</script>
	</head>
	<body>

		<div>hello</div>
		<br>
		<button>给div元素添加css样式</button>

	</body>
</html>

【추천 학습: jquery에서 요소 스타일을 조작하는 방법은 무엇입니까? jQuery 동영상 튜토리얼

웹 프론트엔드 소개 동영상】

위 내용은 jquery에서 요소 스타일을 조작하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

jquery css class position

성명：

이전 기사：jquery에서 상위 요소를 숨기는 방법다음 기사：jquery에서 상위 요소를 숨기는 방법