jQuery_jquery를 사용하여 요소에 스타일을 추가하는 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery_jquery를 사용하여 요소에 스타일을 추가하는 방법에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 15:22:38

원래의

1370명이 탐색했습니다.

이 기사의 예에서는 jQuery를 사용하여 요소에 스타일을 추가하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

1. 스타일 가져오기 및 설정

$("#tow").attr("class")//获取ID为tow的class属性
$("#two").attr("class","divClass")//设置Id为two的class属性。

로그인 후 복사

2. 스타일 추가

코드 복사 코드는 다음과 같습니다.

$("#two").addClass("divClass2")/ /는 두 개체에 divClass2

스타일을 추가하는 ID입니다.

3. 스타일 제거

$("#two").removeClass("divClass")//移除 ID为two的对象的class名为divClass的样式。
$(#two).removeClass("divClass divClass2")//移除多个样式。

로그인 후 복사

4. 클래스 이름 전환

코드 복사 코드는 다음과 같습니다.

$("#two").toggleClass("anotherClass") / / 다른 클래스 스타일로 반복 전환

5. 특정 스타일이 포함되어 있는지 확인

코드 복사 코드는 다음과 같습니다.

$("#two").hasClass("another")= =$( "#two").is(".another");

6. CSS 스타일로 스타일 가져오기

코드 복사 코드는 다음과 같습니다.

$("div").css("color")// 색상 속성 값을 $(element).css(style)

설정합니다.

단일 스타일 설정

코드 복사 코드는 다음과 같습니다.

$("div").css("color","red ")

여러 스타일 설정

$("div").css({fontSize:"30px",color:"red"})
$("div").css("height","30px")==$("div").height("30px")
$("div").css("width","30px")==$("div").height("30px")

로그인 후 복사

7.offset() 메소드

그 기능은 현재 보기 창에서 요소의 상대 오프셋을 얻는 것입니다. 여기서 반환된 객체에는 top과 left라는 두 가지 속성이 포함되어 있습니다.

참고: 보이는 요소에만 유효합니다.

var offset=$("div").offset();
var left=offset.left; //获取左偏移
var top=offset.top; //获取右偏移

로그인 후 복사

8. 위치() 메소드

해당 기능은 위치 스타일 속성이 상대 또는 절대로 설정된 가장 가까운 상위 노드를 기준으로 요소의 상대 오프셋을 얻는 것입니다. offset()과 마찬가지로 반환되는 객체에도 top과 left라는 두 가지 속성이 포함됩니다.

9. scrollTop() 메소드 및 scrollLeft() 메소드

$("div").scrollTop(); //获取元素的滚动条距顶端的距离。
$("div").scrollLeft(); //获取元素的滚动条距左侧的距离。

로그인 후 복사

10. jQuery의 토글 및 슬라이드토글 메소드는 요소를 표시하거나 숨길 수 있습니다. 차이점은 다음과 같습니다.

토글: 동적 효과가 오른쪽에서 왼쪽으로 적용됩니다. 측면 움직임.
SlideToggle: 아래에서 위로 역동적인 효과를 줍니다. 수직 행동.

예를 들어 나무가 아래에서 위로 줄어드는 역동적인 효과를 얻으려면 SlideToggle을 사용하면 됩니다.

$('input').attr("readonly",true)//将input元素设置为readonly
$('input').attr("readonly",false)//去除input元素的readonly属性
$('input').attr("disabled",true)//将input元素设置为disabled
$('input').attr("disabled",false)//去除input元素的disabled属性

로그인 후 복사

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.