문서 객체 모델 style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 모델 style 다루기</title>
<script type="text/javascript">
/*
dom style : style이라는 속성에 들어간 css 속성을 사용할 수 있다.
*/
</script>
</head>
<body>
<input type = "text" name = "memberName" id = "memberName" />
<button type = "button" id = "goStyle">스타일 주기</button>
<script type="text/javascript">
//memberName 아이디 input 박스 테두리와 색상 변경하는 토글기능
var goStyle = document.getElementById('goStyle');
goStyle.addEventListener('click', function() {
var memberName = document.getElementById('memberName');
// rgb(255, 0, 153) <- 핫핑크
console.log(memberName.style.color);
console.log(memberName.style.border);
if(memberName.style.color == 'rgb(255, 0, 153)'){
memberName.style.border = '1px solid #000000';
memberName.style.color = '#000000';
}else{
memberName.style.border = '1px solid #ff0099';
memberName.style.color = '#ff0099';
}
});
</script>
<br><br>
<button type = "button" id = "innerBtn">html 삽입</button>
<div id = "innerHtmlTag">
<h1>버튼을 클릭해주세요.</h1>
</div>
<script type="text/javascript">
//memberName 아이디 input 박스 테두리와 색상 변경하는 토글기능
var innerBtn = document.getElementById('innerBtn');
innerBtn.addEventListener('click', function() {
var innerHtmlTag = document.getElementById('innerHtmlTag');
console.log(innerHtmlTag.innerHTML);
var tag = '';
tag += '<h1 style = "color: #ff0099">안녕하세요.</h1>'
tag += '<span>한국스마트정보교육원에 오신 것을 환영합니다.</span>'
innerHtmlTag.innerHTML = tag;
});
</script>
<br><br>
<img src = "./resource/img/123.gif" id = "imageEvTarget">
<button type="button" id="imageChange">이미지 바꾸기</button>
<script type="text/javascript">
var index = 0;
var imageChange = document.getElementById('imageChange');
imageChange.addEventListener('click', function() {
var imageEvTarget = document.getElementById('imageEvTarget');
if(index == 0){
imageEvTarget.src = './resource/img/unnamed.jpg';
index ++;
}else{
imageEvTarget.src = './resource/img/123.gif';
index = 0;
}
});
</script>
</body>
</html>문서 객체 모델 style
문서 객체 모델 style
문서 객체 모델 - style 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 모델 - style</title>
</head>
<body id = "body">
<!--
실습 1. 아래의 버튼 클릭시 body의 배경 색상을 검정 또 한번 클릭시 흰색으로 바뀌게 스크립트 코드를 작성하시오.
-->
<button type="button" id= "backColorChange" >배경색 변환 </button>
<script type="text/javascript">
var backColorChange = document.getElementById('backColorChange');
var ck = 0;
backColorChange.addEventListener('click',function() {
var body = document.getElementById('body');
if(ck == 0){
body.style.backgroundColor = "#000000"
ck++;
}
else{
body.style.backgroundColor = "#ffffff"
ck=0;
}
});
</script>
</body>
</html>문서 객체 모델 - 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 모델 - 생성</title>
</head>
<body>
<!--
실습 2. 아래의 버튼 클릭시 1~10까지의 행의 값을 가진 테이블을 완성시키시오.
-->
<button type="button" id="tableCreate">테이블 생성</button>
<table>
<tbody>
<tr>
<td>버튼을 클릭해주세요.</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var tableCreate = document.getElementById('tableCreate');
tableCreate.addEventListener('click', function () {
var table = document.getElementsByTagName('table')
var tbody = table[0].tBodies[0]
var t = '';
for(var i = 1; i <= 10 ; i++){
t += '<tr><td>"+i+"</td></tr>'
}
tbody.innerHTML = t;
})
</script>
</body>
</html>
문서 객체 모델 style : display
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 모델 - style : display</title>
</head>
<body>
<button type="button" id="displayBtn">보이게하기</button>
<div class="view">
<h1>안녕하세요.</h1>
</div>
<div class="view" style="display: none;">
<h1>한국스마트정보교육원</h1>
</div>
<script type="text/javascript">
var displayBtn = document.getElementById('displayBtn');
displayBtn.addEventListener('click', function () {
var view = document.getElementsByClassName('view');
for(var i = 0 ; i <view.length ; i++){
if (view[i].style.display == 'none' ){
view[i].style.display = 'block';
}else{
view[i].style.display = 'none';
}
}
});
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 모델 - style : display</title>
</head>
<body>
<button type="button" class="btn" value="0">버튼1</button>
<button type="button" class="btn" value="1">버튼2</button>
<div class="displayDiv">
<h1>뷰1</h1>
</div>
<div class="displayDiv" style="display: none;">
<h1>뷰2</h1>
</div>
<script type="text/javascript">
var btn = document.getElementsByClassName('btn');
for(var i = 0 ; i <btn.length ; i++){
btn[i].addEventListener('click', function () {
console.log(this.value);
var displayDiv = document.getElementsByClassName('displayDiv');
for(var i = 0; i <displayDiv.length ; i++){
if(this.value == "1"){
this.value='0';
displayDiv[i].style.display = 'none';
}else{
this.value= '1';
displayDiv[i].style.display = 'block';
}
}
})
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 모델 - style : display</title>
</head>
<body>
<button type="button" class="btn" value="0">버튼1</button>
<button type="button" class="btn" value="1">버튼2</button>
<div id="displayDiv01">
<h1>뷰1</h1>
</div>
<div id="displayDiv02" style="display: none;">
<h1>뷰2</h1>
</div>
<script type="text/javascript">
var btn = document.getElementsByClassName('btn');
for(var i = 0 ; i <btn.length ; i++){
btn[i].addEventListener('click', function () {
//버튼의 value 값을 가지고 온다.
//버튼의 value 값은 index와 맞추어 작업했다.
console.log(this.value);
var displayDiv02 = document.getElementById('displayDiv01')
var displayDiv02 = document.getElementById('displayDiv02')
if(this.value == '0'){
displayDiv01.style.display = 'block';
displayDiv02.style.display = 'none';
}else{
displayDiv01.style.display = 'none';
displayDiv02.style.display = 'block';
}
})
}
</script>
</body>
</html>탭버튼 만들기 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>탭버튼 만들기</title>
</head>
<body>
<!--
실습3. 3개의 버튼과 3개의 div객체가 있다.
각각 버튼을 클릭시 div객체의 인덱스와 버튼의 인덱스가 일치하는
div객체만 display 되게 하여라.
-->
<button type="button" class="displayBtn" value="0">공지사항</button>
<button type="button" class="displayBtn" value="1">자유게시판</button>
<button type="button" class="displayBtn" value="2">뉴스</button>
<div id="notice">
<div>1 '비상' 14차례 언급한 문 대통령…"이것저것 따질 계제 아니다"</div>
<div>2 "한선교, 계획된 뒤통수"…흠모한 선배라던 황교안과 무슨일</div>
<div>3 이인영 "추경 못하면 역사의 죄인" 심재철 "국민 손에 돈 쥐어줄 궁리만 해"</div>
<div>4 文대통령 "비상경제시국"…개학 2주 연기로 가닥</div>
</div>
<div id="free" style="display: none;">
<div>5 [단독] 황교안 격노·사천 비판에 한선교 “젊음과 전문성에 치중”</div>
<div>6 황교안-한선교 공천 갈등 '폭발'…통합당, 해법 찾기 고심</div>
<div>7 이해찬의 '내로남불'</div>
<div>8 심상정 "꼼수가 꼼수 낳는 참담한 상황…어려워도 원</div>
</div>
<div id="news" style="display: none;">
<div>[코로나19] “팬데믹도 막을 수 없다”…삼성·SK하이닉스 신공장 준비 ‘이상 無’ </div>
<div>국제유가 반토막인데 휘발유 가격은 여전히 1500원대…왜? 포토 </div>
<div>다중주택의 필로티 주차장 층수에서 제외된다 포토 한국일보</div>
<div>대구·경북 가던 특별공급 마스크, 수도권 약국에 푼다(종합) 포토 </div>
</div>
<script type="text/javascript">
var displayBtn = document.getElementsByClassName('displayBtn');
for(var i = 0 ; i <displayBtn.length ; i++){
displayBtn[i].addEventListener('click', function() {
var notice = document.getElementById('notice');
var free = document.getElementById('free');
var news = document.getElementById('news');
if(this.value == '0'){
notice.style.display = 'block';
free.style.display = 'none';
news.style.display = 'none';
}else if(this.value =='1'){
notice.style.display = 'none';
free.style.display = 'block';
news.style.display = 'none';
}else if(this.value =='2'){
notice.style.display = 'none';
free.style.display = 'none';
news.style.display = 'block';
}
})
};
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="number"> X <input type="number">
<button type="button" id="action">계산하기</button>
<div id="result"></div>
<!--
실습 4. 아이디 action 버튼 클릭시 input의 숫자값을 곱하여
아이디 result에 결과값을 뿌려주시오.
(계산값이 50 이상일 경우 텍스트 색상 빨강, 49 이하일 경우 검정)
-->
<script type="text/javascript">
var action = document.getElementById('action');
action.addEventListener('click', function() {
var input = document.getElementsByTagName('input');
var result = document.getElementById('result');
var t = parseInt(input[0].value)*parseInt(input[1].value);
if(t >= 50 ){
result.style.color = '#FF0000';
}else {
result.style.color = '#000000';
}
result.innerHTML = t;
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
실습 5. 상품 가격은 아이디 price에 명시되어있다.
수량을 선택할 경우 아이디 result에 총 상품가격을 상품가격 x 수량만큼 계산하여 적용하라.
(아이디 price X 아이디 num = 아이디 result)
-->
상품가격 : <input type="number" id="price" value = "5000" readonly="readonly">
상품수량 :
<select id="num">
<option value="0"> :: 수량 선택 ::</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div>
총 계산 금액 : <input type="text" id="result" value="" readonly="readonly">
</div>
<script type="text/javascript">
var num = document.getElementById('num');
num.addEventListener('change', function() {
var price = document.getElementById('price');
var result = document.getElementById('result');
result.value = Number(this.value) * parseInt(price.value);
})
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [JavaScript] 문자열 객체 / 브라우저 객체 모델 (0) | 2020.03.23 |
|---|---|
| [JavaScript] Date 객체, 날짜 관련 메서드 / 문자열 객체 메서드, 속성 조금 (0) | 2020.03.17 |
| [JavaScript] DOM (Document Object Model) ② - event / 유효성검사 (0) | 2020.03.16 |
| [JavaScript] DOM (Document Object Model) ① (0) | 2020.03.16 |