티스토리 뷰
document 내장객체
웹브라우저 html을 주제
- document.title 변수 : html 문서의 제목 저장
- document.write( ) 함수( ) : html 문서에 출력
- document.bgColor 변수 : html 문서 배경색 저장
- document.fgColor 변수 : html 문서 글자색 저장
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>practice</title>
<script type="text/javascript">
function fun1() {
alert(document.title); // practice
}
function fun2() {
document.title="document title 변경";
// 페이지소스는 그대로인데 f12는 바뀐 상태
}
function fun3() {
alert(document.bgColor);
}
function fun4() {
document.bgColor="pink"; // 꼭 큰따옴표 넣기!
}
function fun5(c) {
document.bgColor=(c); // 임의변수!!
}
</script>
</head>
<!-- <body bgcolor="green"> -->
<input type="button" value="타이틀확인" onclick="fun1()">
<body bgcolor="green">
<input type="button" value="타이틀수정" onclick="fun2()">
<input type="button" value="bgcolor확인" onclick="fun3()">
<input type="button" value="bgC변경" onclick="fun4()">
<input type="radio" name="col" value="회" onclick="fun5('gray')"> 회색
<input type="radio" name="col" value="청" onclick="fun5('blue')"> 파랑
<input type="radio" name="col" value="주" onclick="fun5('orange')"> 주황
</body>
</html>
image 내장객체
window 내장객체 - document 내장객체 - image 내장객체 : 웹브라우저 html img 태그
document.이미지태그이름.src 변수 : 이미지태그 원본이미지를 저장하는 변수
document.이미지태그이름.width 변수 : 이미지태그 너비 저장하는 변수
document.이미지태그이름.height 변수 : 이미지태그 높이
document.이미지태그이름.border 변수 : 이미지태그 두께
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img practice</title>
<script type="text/javascript">
function fun1() {
alert(document.i1.src);
alert(document.i1.width);
alert(document.i1.height); // 값 없을 경우 알아서 나옴
alert(document.i1.border);
}
function fun2() {
// 원본이미지를 2.jpg로 변경
document.i1.src="2.jpg";
document.i1.height=100;
document.i1.border=3;
}
function fun3() {
alert("귀엽다!");
document.i2.border=3;
}
function fun4() {
document.i3.src="4.jpg";
}
function fun5() {
document.i3.src="3.jpg";
}
</script>
<body>
<img src="1.jpg" name="i1" width="200" border="1">
<input type="button" value="img속성확인" onclick="fun1()">
<input type="button" value="img속성변경" onclick="fun2()">
<img name="i2" src="2.jpg" onclick="fun3()">
<img name="i3" src="3.jpg" onmouseover="fun4()" onmouseout="fun5()">
</body>
</html>
'배운 것 기록 > web' 카테고리의 다른 글
| [js] javascript / 식별자 / 함수 (0) | 2022.05.07 |
|---|---|
| [js] 내장객체 form (0) | 2022.05.03 |
| [html] table (0) | 2022.05.02 |
| [html] 특수 문자 태그, 목록 (0) | 2022.05.02 |
| [js] 내장객체 window, location, history (0) | 2022.05.02 |
댓글