Javascript를 통한 css에 접근
3초마다 이미지가 바뀌는 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function image_step() {
var num = 0;
setInterval(function() {
var img = ['1.jpg', '2.jpg', '3.jpg'];
num = (++num) % 3;
document.getElementById("kimchi").src = img[num];
}, 3000);
}
</script>
</head>
<body onload="image_step()">
<img src="1.jpg" id="kimchi" width="480" height="480">
</body>
</html>
Javascript로 name이 html, css, js인 css태그에 접근하기
- form 객체의 하위 객체에는 css의 name 속성을 통하여 접근할 수 있다.
점수 입력 받고 총점, 평균 내는 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function process() {
var sum = parseInt(document.myform.html.value) + parseInt(document.myform.css.value) + parseInt(document.myform.js.value);
for (var i = 0; i < 3; i++) {
if (!(document.myform[i].value >= 0 && document.myform[i].value <= 100)) {
alert(document.myform[i].name.toUpperCase() + "의 점수는 0~100 사이의 숫자만 입력 가능합니다.")
document.myform[i].value = "";
document.myform[i].focus();
return false;
} else if (isNaN(document.myform[i].value)) {
alert(document.myform[i].name.toUpperCase() + "의 점수는 숫자만 입력 가능합니다.");
document.myform[i].value = "";
document.myform[i].focus();
return false;
}
}
document.myform.sum.value = sum;
document.myform.avg.value = sum / 3;
}
</script>
</head>
<body>
<form name="myform">
<table border="1" cellpadding="3" style="border-collapse: collapse;border-color: #eee;">
<thead>
<tr>
<th></th>
<th align="center">HTML</th>
<th align="center">CSS</th>
<th align="center">Javascript</th>
<th align="center">총점</th>
<th align="center">평균</th>
</tr>
</thead>
<tbody>
<tr>
<td>둘리</td>
<td><input type="text" name="html"></td>
<td><input type="text" name="css"></td>
<td><input type="text" name="js"></td>
<td><input type="text" name="sum"></td>
<td><input type="text" name="avg"></td>
</tr>
</tbody>
<tfoot>
<td colspan="6" align="center">
<input type="button" value="총점,평균 계산" onclick="process()" />
</td>
</tfoot>
</table>
</form>
</body>
</html>