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>
JavaScript学习(5)-Image对象和动态HTML的更多相关文章
- JavaScript学习08 Cookie对象
JavaScript学习08 Cookie对象 JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cooki ...
- javascript如何解析json对javascript如何解析json对象并动态赋值到select列表象并动态赋值到select列表
原文 javascript如何解析json对象并动态赋值到select列表 JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScri ...
- JavaScript学习总结 之对象
JavaScript学习总结(二) ---- 对象 在JavaScript中,几乎用到的每个js都离不开它的对象.下面我们深入了解一下js对象. js中对象的分类跟之前我们学过的语言中函数的分类一样, ...
- javascript学习总结之对象的深拷贝和浅拷贝
前言 最近在写ES6的文章的时候发现重复遇到关于javascript深拷贝和浅拷贝的问题,然后查找了一些资料,根据资料和自己的理解做了以下笔记,毕竟javascript关于深拷贝和浅拷贝的问题在一些面 ...
- JavaScript:学习笔记(8)——对象扩展运算符
JavaScript:学习笔记(8)——扩展运算符 对象的扩展运算符 扩展运算符是三个点(...).用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中. 如上图所示,新建了一个对象a,然后通过扩 ...
- JavaScript学习笔记——BOM_window对象
javascript浏览器对象模型-windwo对象 BOM Browser Object Model window对象 是BOM中所有对象的核心. 一.属性 1.(位置类型-获得浏览器的位置) IE ...
- Javascript学习之Function对象详解
JavaScript中的Function对象,就是我们常说的函数对象.在JS中,所有的函数也是以对象的形式存在的. 语法 充当Function对象的构造函数使用,用于结合new关键字构造一个新的Fun ...
- Javascript学习之Date对象详解
1.定义 创建 Date 实例用来处理日期和时间.Date 对象基于1970年1月1日世界协调时起的毫秒数 2.语法 构造函数 new Date() new Date(value) value代表自世 ...
- JavaScript学习笔记之对象
目录 1.自定义对象 2.Array 3.Boolean 4.Date 5.Math 6.Number 7.String 8.RegExp 9.Function 10.Event 在 JavaScri ...
- javascript学习之Date对象
前几天学习了一下date对象,于是写了一个简单的时间显示放到博客页面里(位于右上角),类似这样的效果,时:分:秒 xxxx年xx月xx日. 下面来说一下具体实现步骤. 首先,既然date是一个对象,那 ...
随机推荐
- 图解Sysprep封装系统
图解Sysprep封装系统 一.使用安装管理器工具创建 Sysprep.inf 应答文件 要安装“安装管理器”工具并创建应答文件,请按照下列步骤操作: 1)打开“我的电脑”,然后打开 Wind ...
- Observable 示例之 Windows Phone 列表内项目逐个加载
在写 Windows phone应用性能优化(一)的时候,在 ListBox 的项加载的时候,添加了一些简单的动画. 其实在 Windows Phone 的应用中使用 Blend 设计动画是很容易的, ...
- ORACLE用户角色与授权
--创建一个用户CREATE USER test_user IDENTIFIED BY test_user; --创建一个角色 CREATE ROLE connect2 ; --为角色授权 GRANT ...
- js eval深入
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...
- 安装expect命令 两种方式
yum安装 yum -y install expect 手动安装 expect以及tcl版本 #!/bin/bash oldpath=`pwd` tar -zxf tcl8.4.20-src.tar. ...
- [uboot]Issue list
- TVS二极管的主要参数与选型
TVS二极管的主要参数--转载 处理瞬时脉冲对器件损害的最好办法是将瞬时电流从敏感器件引开.TVS二极管在线路板上与被保护线路并联,当瞬时电压超过电路正常工作电压后,TVS二极管便发生雪崩,提供给瞬时 ...
- linux系统中/etc/syslog.conf文件解读
1: syslog.conf的介绍 对于不同类型的Unix,标准UnixLog系统的设置,实际上除了一些关键词的不同,系统的syslog.conf格式是相同的.syslog采用可配置的.统一的系统登记 ...
- 一条经典SQL语句优化实例
1.概述 如下SQL语句发生严重消耗资源的问题,使得OS's load average会在30以上,一条语句需要执行上百秒. /*PIXPatient 184176条DomainPatient 184 ...
- mysql_ado的demo
winform程序 http://pan.baidu.com/s/1nvxm5br