功      能:在同一个网页上切换显示不同的图片与文本(*亲测可用)

使用属性:

a) document.getElementById(" ") ——返回一个与给定的id属性值的元素节点对应的元素——[(" ")内元素为指定的id名]

b) document.getElementByTagName(" ") ——返回一个数组——[(" ")为元素名,例如:a;p;li等]

c).getAttribute(" ") ——获取元素属性的值 ——[(" ")打算查询的属性名字,例如:href;title等]、

d).setAttribute(" ", " ") ——设置或修改某个属性的内容

e) onclick="showpic(this); return false" ——onclick:事件处理函数,用户点击某个链接时触发的一个动作;return false:链接被点击时的默认行为将不会发生

f) document.getElementById("descriptor").chlidNodes[0].nodeValue ——获取P元素的文本内容(chlidNodes[0]相当于firstchild)

HTML:

JS:

CSS:

JavaScript 编程艺术-第4章(JavaScript美术馆)代码的更多相关文章

  1. JavaScript编程艺术-第7章代码汇总(2)

    [7.4节] 重回“JavaScript美术馆”代码 ***亲测可用*** HTML: JS:

  2. JavaScript编程艺术-第6章(JavaScript美术馆改进版)代码

    基于[第4章(JavaScript美术馆)代码]进行改进(***HTML与JS分离***) (*亲测可用) HTML: JS: CSS:

  3. JavaScript DOM编程艺术第四章 — JavaScript图片库案例研究

    这一章通过JavaScript图片库案例,学习了一些DOM属性. HTML代码 <!DOCTYPE html> <html> <head> <meta cha ...

  4. JavaScript编程艺术-第10章-10.2-实用的动画

    10.2-实用的动画 ***代码亲测可用*** HTML: <!DOCTYPE HTML> <html> <head> <meta charset=" ...

  5. JavaScript编程艺术-第7章代码汇总(1)

    1.document.write()(HTML与JS未分离) HTML: JS: 2..innerHTML(直接覆盖) HTML: JS: 3.getAttribute.setAttribute.ge ...

  6. JavaScript编程艺术-第10章-10.1-动画

    10.1—最简单的动画 ***代码亲测可用*** 动画:让元素位置随着时间而不断地发生变化 HTML: <!DOCTYPE HTML> <html> <head> ...

  7. JavaScript编程艺术-第8章-8.6.1-显示“缩略词语表”

    8.6.1-显示“缩略词语表” ***代码亲测可用*** HTML: JS: ***end***

  8. JavaScript取消默认控件并添加新控件(DOM编程艺术第11章)

    这一章实现的这个功能我研究了好久,这个思路我感觉已经是现在的我要膜拜的了,我感觉我的逻辑还是有些问题. 第一个问题:vid.height与vid.videoHeight vid.height = vi ...

  9. javascript DOM编程艺术 第10章问题记录

    为什么moveElement函数调用时,必须加字符串的拼接符 var repeat = "moveElement('"+elementID+"',"+final ...

随机推荐

  1. java 数组 输入5名学生的成绩 得出平均分。

    import java.util.Scanner; public class LianXi4{ public static void main(String[] args){ //创建长度为5的数组 ...

  2. spring-boot-starter-data-redis与spring-boot-starter-redis两个包的区别

    spring-boot-starter-data-redis: <?xml version="1.0" encoding="UTF-8"?> < ...

  3. 学习swift从青铜到王者之swift枚举07

    空枚举 //空枚举 enum SomeEnumeration { // enumeration definition goes here } 枚举基本类型 //枚举基本类型 enum CompassP ...

  4. [BLE--Physical Layer]

    简述 BLE的物理层,可能做IC或板极硬件RF測试的会比較关注. 是偏硬件层面的. 频率带宽和信道分配 BLE工作于2.4 GHz ISM频段2400-2483.5 MHz,ISM频段是公用的,不须要 ...

  5. Edmonds 开花算法

    Edmonds 开花算法 input: 图G,匹配M,未饱和点u idea: 查找从 u 開始的 M-交错路径.对每一个顶点记录父亲节点. 发现花朵.则收缩. 维护 S 和 T.S 表示沿着已经饱和的 ...

  6. 通过grub硬盘安装centos7

    centos7与centos6.x有了很大的不同,从硬盘安装的方法也有了很大的不同,故出此文章我机器环境如下:    有俩系统 Win7 和 RHEL6.4 ,是通过grub(非grub2)引导的,g ...

  7. Hadoop在window上运行 user=Administrator, access=WRITE, inode="hadoop"

    win7下eclipse中错误的详细描述如下: org.apache.hadoop.security.AccessControlException: org.apache.hadoop.securit ...

  8. HDU1306 String Matching 【暴力】

    String Matching Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  9. 把A表中的a字段和b字段数据 复制到B表中的aa字段和bb字段

    insert into tab2 (column1,column2) select column1,column2 from tab1

  10. 怎样免费设置QQ空间背景音乐

    怎样免费设置QQ空间背景音乐 1.打开QQ空间,点击 2. 3. 4.这里它要求我们输入歌曲的在线路径,并且必须是MP3格式的,这就简单了,我们仅仅要去网上找在线的MP3音乐就能够了.可是如今非常多提 ...