<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.center {
text-align: center;
}
.content {
overflow: hidden;
border: 1px solid #777;
}
.content,
.content .left,
.content .right {
width: 50%;
margin: 0 auto;
box-sizing: border-box;
padding: 5px;
}
.content .right,
.content .left {
float:left;
}
.left .inner,
.right .inner {
border: 1px solid #777;
height: 300px;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.change{
background-color: black;
color:white;
}
.show{
display:none;
}
</style>
</head>
<body>
<header>
<div class="center">
<h2>토글형태 활용하기</h2>
<button id="btn1" class="dark">어둡게보기</button>
<button id="btn2" class="name">이름보기</button>
<!--추가-->
<hr>
</div>
</header>
<section>
<div class="content">
<div class="left">
<div class="inner"><img src="img/log.png"></div>
</div>
<div class="right">
<div class="inner">
<p class="info show">홍길자<br>20세<br>능력단위<br>Java, Oracle, JSP, CSS, Javascript</p>
<p class="dict">자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다</p>
<a href="https://www.naver.com">위키백과</a>
</div>
</div>
</div>
</section>
<script>
var btn1=document.querySelector("#btn1");
var btn2=document.querySelector("#btn2");
var center=document.querySelector(".center");
var aa=document.querySelector(".inner>a");
aa.style.color="black";
btn1.onclick=function(){
//var bodies=center.parentElement.parentElement;
var bodies=document.body;//body태그는 document의 자식이라 한번에 받아올 수 있다.
bodies.classList.toggle("change");
if(btn1.innerHTML=="어둡게보기"){
btn1.innerHTML="밝게보기";
aa.style.color="white";
}else{
btn1.innerHTML="어둡게보기";
aa.style.color="black";
}
}
////////////////////////////////////////////////////////
var info = document.querySelector(".info");
var dict = document.querySelector(".dict");
var atag=document.querySelector(".inner>a");
btn2.addEventListener("click",function(){
btn2.classList.toggle("name");
if(btn2.classList.contains("name")){
btn2.innerHTML="내용보기";
info.classList.toggle("show");
dict.classList.toggle("show")
atag.classList.toggle("show");
}else{
btn2.innerHTML="이름보기";
info.classList.toggle("show");
dict.classList.toggle("show")
atag.classList.toggle("show");
}
})
</script>
</body>
</html>body태그는 document의 자식이기 때문에 document.body로 가져올 수가 있다.
toggle은 있으면 제거, 없으면 추가임.
'JS' 카테고리의 다른 글
| 230103 JS 이벤트객체 활용 실습 (0) | 2023.01.03 |
|---|---|
| 230103 JS 이벤트객체 (0) | 2023.01.03 |
| 230102 JS 클래스 속성 제어 (0) | 2023.01.02 |
| 230102 JS 노드생성,이동,삭제 실습 (1) | 2023.01.02 |
| 230102 JS 노드삭제 (1) | 2023.01.02 |
