728x90
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
</style>
</head>
<body>
<h1 class="a">JavaScript</h1>
<h2>css</h2>
<script>
let n=document.querySelector('h1')
let n2=document.querySelector('h2');
//h2태그의 클래스이름을 active 추가
n2.className='active';
//
n.className='active';
</script>
</body>
</html>
액티브 클래스가 추가 / 삭제
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');
</style>
</head>
<body>
<h1 class="style1 style2">H1</h1>
<h2 class="style1 style2 style3">H2</h2>
<script>
let n = document.querySelector('h1');
console.log(n.classList.length); //h1클래스의 개수
n.addEventListener('mouseenter', function () {
this.classList.add('active'); //클래스 추가
})
n.addEventListener('mouseleave', function () {
this.classList.remove('active'); //클래스 삭제
})
let n2 = document.querySelector('h2');
console.log(n2.classList.length); //h2클래스의 개수
</script>
</body>
</html>
dataset (data - 속성)
cf) data - 속성 ='값';
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');
</style>
</head>
<body>
<div class="di">
<h1 data-cafe="아이스아메리카노">아이스아메리카노</h1>
<h1 data-cafe="플랫화이트">플랫화이트</h1>
<h1 data-cafe="라테이">라테이</h1>
</div>
<script>
let n = document.querySelectorAll(".di h1");
for(let i=0;i<n.length;i++){
n[i].addEventListener('click',function(){
let n2=this.getAttribute('data-cafe');
console.log(n2+" 나왔습니다")
})
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');
</style>
</head>
<body>
<div class="di">
<h2>Coffee Orders</h2>
<div class="di2">
<h1 data-price='5000' data-cafe="Iced Americano">Iced Americano</h1>
<h1 data-price='6000' data-cafe="Flat White">Flat White</h1>
<h1 data-price='5500' data-cafe="Lattei">Lattei</h1>
</div>
<p>Ordered: <span id="order">No menu</span>
<span id="price">0</span> Won
</p>
</div>
<script>
let n = document.querySelectorAll('.di2 h1'); // 3개 값
let n2 = document.querySelector('#order'); // 첫 번째 요소 선택
let n3 = document.querySelector('#price'); // 첫 번째 요소 선택
for (let i = 0; i < n.length; i++) {
n[i].addEventListener('click', function () {
let menu = this.dataset.cafe; // 선택한 커피메뉴
let price = this.dataset.price; // 선택한 커피가격
n2.textContent = menu; // 첫 번째 요소에 텍스트 설정
n3.textContent = price; // 첫 번째 요소에 텍스트 설정
})
}
</script>
</body>
</html>728x90
'Language > JavaScript' 카테고리의 다른 글
| [JS] 종합복습2 (0) | 2024.04.04 |
|---|---|
| [JS] 종합복습 (0) | 2024.04.03 |
| [JS] HTML DOM Node (0) | 2024.04.03 |
| [JS] 예시 (0) | 2024.04.03 |
| [JS] setInterval (0) | 2024.04.02 |