스타일 작동 방법: 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>
2. css() 메소드를 사용하여
$(document).ready(function() {
$("button").click(function() {
$("img").css("width","250px");
});
});
jquery에서는 요소 스타일을 조작하여 간접적으로 조작할 수 있습니다.
| addClass() | |
|---|---|
| attr() | |
| prop() | |
| removeAttr() | |
| removeClass() | |
| toggleClass() | |
<!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에서 요소 스타일을 조작하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!