您的位置：首页 > Web前端 > JavaScript

JavaScript学习（5）-Image对象和动态HTML

2015-01-14 22:45 232 查看

JavaScript学习5

1.image 对象

对象引用

document.images

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航