문서 객체의 스타일 변경
- style 속성 사용
- getElementById ( ) 메서드로 문서 객체를 가져옴
- style 속성에 있는 border, color, fontFamily 속성을 지정
- CSS에 입력하는 것과 같은 형식으로 입력
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서객체 동적 생성</title>
<script>
window.onload = function() {
// 태그이름으로 문서객체 생성 > 배열로 반환
var divs = document.getElementsByTagName('div'); // div 아래두개모두선택
divs[0].innerHTML='By tagname - 0 ';
divs[1].innerHTML='By tagname - 1 ';
// style
divs[0].style.color = 'pink';
};
</script>
</head>
<body>
<div id="header-1">1</div>
<div id="header-2">2</div>
</body></html>
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Window Object</title>
<script>
window.onload = function() {
document.getElementById('go_naver_btn').onclick = function() {
var alink = document.querySelector('a');
alink.style.display='block';
alink.style.backgroundColor='blue';
alink.style.fontSize=32;
alink.style.color='yellow';
alink.style.fontWeight='bold';
alink.style.textAlign='center';
};
};
</script>
</head>
<body>
<a href="http://www.naver.com">네이버로 이동</a>
</body></html>
'front-end > Javascript & jquery' 카테고리의 다른 글
| [자바스크립트] 이벤트 전달 / 막기 (bubbling) / stopPropagation (0) | 2020.11.30 |
|---|---|
| [자바스크립트] 유효성검사 (0) | 2020.11.30 |
| [자바스크립트] 이벤트 (0) | 2020.11.30 |
| [자바스크립트] 문서 객체 가져오기 / getElementById / querySelector (0) | 2020.11.30 |
| [자바스크립트] 문서객체 만들기 / createElement / createTextNode (0) | 2020.11.30 |
| [자바스크립트] onload (0) | 2020.11.30 |
| [자바스크립트] 윈도우 객체 (0) | 2020.11.30 |