jQuery 조작 요소 CSS 스타일의 세 가지 방법에 대한 자세한 설명-CSS 튜토리얼-php.cn

jQuery 조작 요소 CSS 스타일의 세 가지 방법에 대한 자세한 설명

高洛峰

풀어 주다： 2017-03-13 10:15:30

원래의

1362명이 탐색했습니다.

jQuery는 페이지 요소의 스타일을 변경하는 세 가지 방법을 제공합니다. 기존 방법과 유사하지만 코드를 많이 절약합니다.

우리는 페이지 요소의 스타일을 변경하기 위해 종종 Javascript를 사용합니다. 페이지 요소. 한 가지 방법은 페이지 요소의 CSS 클래스(Class)를 변경하는 것입니다. 기존 Javascript에서는 일반적으로 HTML Dom 및 jQuery의 클래스 이름 속성을 처리하여 이를 수행합니다. 이 기능을 구현하기 위해 제공됩니다. 기존 방법과 유사하지만 코드가 많이 절약됩니다. 여전히 같은 문장 - "jQuery는 JavaScript 코드를 간결하게 만듭니다!"

1. addClass() - CSS 클래스 추가
$("#target").addClass("newClass"); /#target은 스타일을 지정해야 하는 요소의 ID를 나타냅니다.
//newClass는 CSS 클래스의 이름을 나타냅니다.
2.removeClass() - CSS 클래스를 제거합니다.
$("#target " ).removeClass("oldClass");
//#target은 CSS 클래스를 제거해야 하는 요소의 ID를 나타냅니다.
//oldClass는 CSS 클래스의 이름을 나타냅니다
3. 토글클래스() - CSS 클래스 추가 또는 제거: CSS 클래스가 이미 존재하면 제거되고, CSS 클래스가 존재하지 않으면 추가됩니다.
$("#target").toggleClass("newClass")
//ID가 "target"인 요소에 CSS 스타일이 정의되어 있으면 제거됩니다.
//반대로, CSS "newClass" 클래스에 이 ID가 할당됩니다.

실제 애플리케이션에서는 이러한 CSS 클래스를 먼저 정의한 다음 Javascript 이벤트 트리거링(예: 링크 클릭)을 통해 페이지 요소 스타일을 변경하는 경우가 많습니다. 또한 jQuery는 요소에 CSS 클래스가 할당되었는지 확인하는 hasClass("className") 메서드도 제공합니다.

아래는 전체 예시입니다.

코드는 다음과 같습니다.

<!DOCTYPE HTML> 
<head> 
<title>图片闪烁</title> 
<style type="text/css"> 

@-webkit-keyframes twinkling{ /*透明度由0到1*/ 
0%{ 
opacity:0; /*透明度为0*/ 
} 
100%{ 
opacity:1; /*透明度为1*/ 
} 
} 

.up{ 
-webkit-animation: twinkling 1s infinite ease-in-out; 
} 
</style> 

</head> 
<body> 
<p id="soccer" class="up"> 
哈哈 
</p> 
<br/> 
<input type="button" onclick=&#39;btnClick()&#39;> 
<script src="./jQuery/jquery-1.8.3.js" type="text/javascript"></script> 
<script> 

function btnClick(){ 
//$("#soccer").removeClass("up"); 
$("#soccer").toggleClass("up"); 
//$("p:first").removeClass("intro"); 
} 
</script> 
</body> 
</html>

로그인 후 복사

위 내용은 jQuery 조작 요소 CSS 스타일의 세 가지 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!