JavaScript学习5
1.image 对象
- 对象引用
document.images[n]
document.images["imageName"]
document.imageName
- 预缓存图像
预缓存图像需要在内存中构造image对象，内存对象是由脚本创建的，页面上是看不到的,通过对document中图像的src修改来显示，注意new Image()中大写
var myImage=new Image(width,height);
myImage.src="someArt.gif";
document.imageName.src=myImage.src;
下面代码通过选择select的option实现图片的切换
<html>
<head>
<title>js_11</title>
<script type="text/javascript">
var imageList=new Array();
imageList["image1"]=new Image(120,90);
imageList["image1"].src="nav1.png";
imageList["image2"]=new Image(120,90);
imageList["image2"].src="nav2.png";
function loadImage(list){
var imagename=list.options[list.selectedIndex].value;
document.imageShow.src=imageList[imagename].src;
}
</script>
</head>
<body>
<h2> iamge list</h2>
<img name="imageShow" src="nav1.png" alt="good">
<form>
<select name="cashed" onchange="loadImage(this)">
<option selected value="image1">image1</option>
<option value="image2">image2</option>
</select>
</form>
</body>
</html>
- JavaScript:伪URL
格式为<a href="javascript:goFirst()">
2.动态HTML技术
- 样式更改
通过修改HTML的style属性，可以实现对css样式的修改如：document.getElementById("aCodeAera").style.color="rgb(255,255,0)";但是有一些css的样式名称不符和JavaScript的命名格式如font-weight，用JavaScript的时候可以这么写document.getElemntById("aCodeAera").style.fontWeight="bold";不过现在可以通过写css类来解放这么长的引用，如
.normal{ backgroud-color:#ffffff}
.highLighted{background-color:#ff0000}
<p id="news" class="normal">...</p>
document.getElementById("new").className="highLighted";
- W3C DOM节点动态改变
下面是一个例子，先创建一个元素，创建一个文本域，元素中添加文本域。在<div>中添加该元素
<html>
<head>
<title>js_12,4,2</title>
<style type="text/css" >
.centered{background-color: #ff0000}
</style>
<script type="text/javascript">
function welcome(firstname){
var newelement=document.createElement("p");
newelement.className="centered";
var newtext=document.createTextNode("welcome "+firstname+" come to javascript world!");
newelement.appendChild(newtext);
document.getElementById("placeholder").appendChild(newelement);
}
</script>
</head>
<body>
<input type="text" name="entered" onchange="welcome(this.value)">
<div id="placeholder"></div>
</body>
</html>
- 通过innerHTML属性添加
要比上面的方式简单一些，在W3C DOM规范之前，微软发明的一个元素对象属性,省去了建立元素和节点的过程
直接通过innerHTML添加相应的html片段。
<html>
<head>
<title>js_12.4.3</title>
<style type="text/css" >
.centered{background-color: #ff0000}
</style>
<script type="text/javascript">
function welcome(htmlName){
var newHtml="<p class='centered'>welcome ";
newHtml+=htmlName;
newHtml+=" come to javascript world</p>";
document.getElementById("placeholder").innerHTML=newHtml;
}
</script>
</head>
<body>
<input type="text" name="entered" onchange="welcome(this.value)">
<div id="placeholder"></div>
</body>
</html>