>  기사  >  웹 프론트엔드  >  JQuery_jquery에서 CSS 스타일을 조작하는 방법

JQuery_jquery에서 CSS 스타일을 조작하는 방법

WBOY
WBOY원래의
2016-05-16 17:00:241023검색

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

//1. 스타일 설정

$("#tow").attr("class")는 ID 견인으로 클래스 속성을 가져옵니다

$("#two").attr("class","divClass")는 Id가 2인 클래스 속성을 설정합니다.

//2. 추가 스타일

$("#two").addClass("divClass2")는 ID가 2인 개체에 divClass2 스타일을 추가합니다

//3. 스타일 제거

$("#two").removeClass("divClass")는 ID가 2인 개체의 divClass라는 스타일을 제거합니다.

$(#two).removeClass("divClass divClass2")는 여러 스타일을 제거합니다.

//4. 클래스 이름 바꾸기

$("#two").toggleClass("anotherClass") // 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("너비","30px")==$("div").height("30px")

//7.offset() 메소드

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

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

var offset=$("div").offset();

var left=offset.left; //왼쪽 오프셋 가져오기

var top=offset.top; //올바른 오프셋 가져오기

//8.position() 메소드

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

$("div").scrollTop(); //요소의 스크롤 막대와 상단 사이의 거리를 가져옵니다.

$("div").scrollLeft(); //요소의 스크롤 막대와 왼쪽 사이의 거리를 가져옵니다.

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

//toggle: 동적 효과는 오른쪽에서 왼쪽으로 적용됩니다. 측면 움직임.

//slideToggle: 동적 효과는 아래에서 위로 진행됩니다. 수직 행동.

//예를 들어 나무가 아래에서 위로 축소되는 동적 효과를 얻으려면 SlideToggle을 사용하면 됩니다.

$('input').attr("readonly",true)//입력 요소를 읽기 전용으로 설정

$('input').attr("readonly",false)//입력 요소 제거 읽기 전용 속성
$('input').attr("disabled",true)//입력 요소를 비활성화로 설정
$('input').attr("disabled",false)//입력 제거

요소의 비활성화 속성
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.