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>

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>

你可能感兴趣的:(JavaScript)