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

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>
posted @ 2015-01-14 22:45  KeithMorning  阅读(536)  评论(0)  编辑  收藏  举报