JQuery DOM 스타일 조작
class 도 노드 요소 의 속성 이기 때문에 class 를 가 져 오 거나 class 를 설정 할 때 attr()방법 으로 완성 할 수 있 습 니 다.
추가 스타일
attr()방법 으로 class 속성 을 직접 설정 하면 원래 의 class 속성 을 교체 합 니 다.
새로운 스타일 을 추가 할 때 기 존 스타일 을 유지 해 야 한다 면 addClass()방법 을 사용 할 수 있 습 니 다.
메모:하나의 노드 요소 가 여러 class 스타일 을 포함 할 때 다음 과 같은 방식 으로 처리 합 니 다.
클 라 스 의 값 을 삭제 하려 면 removeClass()방법 으로 완성 할 수 있 습 니 다.일치 하 는 요소 에서 모든 클 라 스 를 삭제 하거나 지정 한 클 라 스 를 삭제 하 는 역할 을 합 니 다.
매개 변 수 를 전달 하지 않 을 때 모든 것 을 삭제 합 니 다.매개 변 수 를 지정 할 때 지정 한 class 만 삭제 합 니 다.
어떤 스타일 이 있 는 지 판단 하기
hasClass()방법 은 요소 에 어떤 class 가 포함 되 어 있 는 지 판단 할 수 있 습 니 다.있 으 면 true 로 돌아 갑 니 다.그렇지 않 으 면 false 로 돌아 갑 니 다.
사례 원본:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM </title>
<script src="../js/jquery-3.1.1.js"></script>
<script>
//
$(function(){
// id p2 p_content
$("#btn1").click(function(){
$("#p2").attr("class","p_content");
});
//
$("#btn2").click(function(){
$("#p1").addClass("p_bg");
});
//
$("#btn3").click(function(){
// removeClass 。
$("#p1").removeClass("p_bg");
$("#p2").addClass("p_bg").removeClass("p_content");
});
//
$("#btn4").click(function(){
alert($("#p2").hasClass("p_content"));
});
})
</script>
<style>
.p_content {
color: red;
font-size: 15px;
}
.p_bg {
background-color: red;
color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p id="p1" class="p_content"> ?</p>
<ul>
<li title=" "> </li>
<li title=" "> </li>
<li title=" "> </li>
</ul>
<p id="p2"> ？</p>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
<button id="btn1"> </button>
<button id="btn2"> </button><br /><br />
<button id="btn3"> </button>
<button id="btn4"> </button><br /><br />
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[Udemy] React 기본 - 일기장 만들기(2)src/App.js src/DiaryEditor.js ☑️ 사용자 입력을 받는 form (input, textarea) 요소에 특정 길이 이상의 입력이 제대로 들어왔는지 확인하는 코드 작성 ☑️ const handl...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
