기록
자바스트립트,제이쿼리 특정요소에 css요소 추가/삭제 이벤트주기 본문
제이쿼리
선택요소.toggleClass(스타일클래스);<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
<style>
.h2{
background-color : yellow;
}
</style>
<script>
$(function(){
$("button").click(function(){
$("h2, div, span").toggleClass('h2');
/* $("h2, div, span").css("background-color", "yellow"); */
});
});
</script>
</head>
<body>
<h1>안녕하세요</h1>
<h2 class="h2">방갑습니다</h2>
<div class="h2">오늘은 월요일입니다</div>
<p>오늘도 화이팅합니다!</p>
<p>점심은 <span class="h2">햄버거</span>를 먹을거에요</p>
<button>Click me</button>
</body>
</html>
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
<style>
.h2{
background-color : yellow;
}
</style>
<script>
function myclick(){
console.log("gdgd");
let tg = document.querySelectorAll(".hh");
console.log(tg);
tg[0].classList.toggle("h2");
tg[1].classList.toggle("h2");
tg[2].classList.toggle("h2");
};
</script>
</head>
<body>
<h1>안녕하세요</h1>
<h2 class="hh">방갑습니다</h2>
<div class="hh">오늘은 월요일입니다</div>
<p>오늘도 화이팅합니다!</p>
<p>점심은 <span class="hh">햄버거</span>를 먹을거에요</p>
<button onclick="myclick()">Click me</button>
</body>
</html>
'JAVASCRIPT&JQUERY' 카테고리의 다른 글
| 자바스크립트 구구단 찍기(파이썬3) (0) | 2023.01.10 |
|---|---|
| 자바스크립트 double버튼 만들기(파이썬2) (0) | 2023.01.10 |
| 자바스트립트 토글버튼 만들기 (파이썬) (0) | 2023.01.10 |
| 자바스트립트 querySelector를 활용한 데이터 참조 (0) | 2023.01.04 |
| 자바스크립트 : 객체, 배열 (0) | 2022.12.27 |
'JAVASCRIPT&JQUERY' Related Articles
more
