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 값 반환하는 부분.
'웹개발' 카테고리의 다른 글
| [명품 웹 프로그래밍] 8장 실습문제 7, 클릭할 때마다 그림 회전 (0) | 2021.12.11 |
|---|---|
| [명품 웹 프로그래밍] 8장 실습문제 5, 카드 넘기기 (0) | 2021.12.11 |
| [명품 웹 프로그래밍] OpenChallenge 5, CSS3로 태그 배치하기 (0) | 2021.10.19 |
| [명품 웹 프로그래밍] OpenChallenge 4, CSS3 모양 꾸미기 (0) | 2021.10.19 |
| [명품 웹 프로그래밍] OpenChallenge 3, 구조화 및 웹 폼 삽입 (0) | 2021.10.19 |
