웹개발
[명품 웹 프로그래밍] 8장 실습문제 3, 빈 칸 채우기 / 숨기기
hatch
2021. 12. 11. 01:21
728x90
반응형
실행 화면
| 숨기기(기본 값) | 보이기 |
 |
 |
<자바스크립트 코드>
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>x</title>
<style>
span {visibility: hidden; color: blue;}
</style>
</head>
<body id="parent">
<h3>visibility의 프로퍼티</h3>
<hr>
<button onclick="show()">show/hide</button>
<ul>
<li>I (<span>love</span>) you</li>
<li>I (<span>hate</span>) you</li>
</ul>
<script>
function show() {
var spanArray = document.getElementsByTagName("span");
for(var i=0; i<spanArray.length; i++) {
var span = spanArray[i];
//obj에 적용된 CSS style 가져오기
var style = window.getComputedStyle(span);
//CSS 프로퍼티 중 visibility 값 반환
var v = style.getPropertyValue("visibility");
if(v=="hidden") span.style.visibility = "visible";
else span.style.visibility = "hidden";
}
}
</script></body></html>
1. 복습 필요 : CSS style 값 가져오고, visibility 값 반환하는 부분.