Javascript DOM練習01
2895 ワード
<!DOCTYPE html>
<html>
<head>
<title>Javascript DOM 01</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
/* ， */
a:link,a:visited {
color: #0044ff;
text-decoration: none;
}
a:hover {
color: #ff8800;
}
#newstext {
width: 500px;
border: #00ff00 1px solid;
padding: 10px;
}
/* 。 。*/
.norm {
color: #000000;
font-size: 16px;
background-color: #cdd8d0;
}
.max {
color: #808080;
font-size: 28px;
background-color: #9ce9b4;
}
.min {
color: #ffffff;
font-size: 12px;
background-color: #f1b96d;
}
</style>
</head>
<body>
<!--
： 。
：
1， ， 。
2， 。 ( ， 。)
3， ， 。
：a ， ：onclick。
div-newstext
， 。
href ：javascript:void(0) javascript:; 。
4， js 。
-->
<script type="text/javascript">
// 。
function changeFont2(size, clr) {
/*
* div newstext 。
* div 。
*
*/
var oNewsText = document.getElementById("newstext");
// oNewText style 。
oNewsText.style.fontSize = size;
oNewsText.style.color = clr;
}
/*
* 。
* ，
*
* 1， ， ，
* 2，js css 。
* 3， 。
*
* ：
* 。
* ， 。
*/
function changeFont(selectorName) {
var oNewsText = document.getElementById("newstext");
oNewsText.className = selectorName;
}
</script>
<h1> </h1>
<hr/>
<a href="javascript:;" onclick="changeFont('max')"> </a>
<a href="javascript:void(0)" onclick="changeFont('norm')"> </a>
<a href="javascript:void(0)" onclick="changeFont('min')"> </a>
<div id="newstext" class="norm">
</div>
</body>
</html>