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

使用属性:

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课堂测试—根据模板完成一个简单的技术需求征集系统

    课堂上老师发布了一个页面模板要求让我们实现一个系统的功能,模仿以后后端的简单工作情况. 然后在这个模板的基础上,提供了一个注册的网页模板,接着点击注册的按钮,发现register里面调用了zhu/zh ...

  2. Eclipse-Java代码规范和质量检查插件-Checkstyle

    CheckStyle是SourceForge下的一个项目,提供了一个帮助JAVA开发人员遵守某些编码规范的工具.它能够自动化代码规范检查过程,从而使得开发人员从这项重要但枯燥的任务中解脱出来.它可以根 ...

  3. [转]thrift系列 - 快速入门

    原文: http://blog.csdn.net/hrn1216/article/details/51274934 thrift 介绍,入门例子. thrift 是一个RPC框架,实现跨语言 ---- ...

  4. FreeFileSync同步定时执行

    Schedule a Batch Job Create a new batch job via FreeFileSync's main dialog: Menu → File → Save as a ...

  5. USB多重系統 - 開機碟工具 – WinSetupFromUSB

    WinSetupFromUSB下載與安裝 讓USB磁碟擁有多重開機的功能,WinSetupFromUSB有著提軟體和硬體的高相容性. [官方網頁]:http://www.winsetupfromusb ...

  6. Office2010,PPT,EXCEL如何插入日历控件

    1 在Office2010中插入其他控件,然后找到日历控件   2 十字架随便在Excel中绘制一下,得到一个日历控件,注意此时还是在设计模式下,在设计模式下日历控件不是正常状态,你还是可以双击这个控 ...

  7. Office EXCEL 如何将复制的一堆数据按空格断开

    1 复制粘贴一堆数据,点击数据-分类,然后点击下一步   2 一直下一步   3 最后效果如下图所示  

  8. Java中抽象类和接口的区别?

    深入理解Java的接口和抽象类 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在初学的 ...

  9. c# 字节高低位

    byte n = br.ReadByte(); ; // 高位 var l = n & 0x0f; // 低位

  10. USACO44 TimeTravel 时间旅行(链表)

    第一眼看到这题,woc,这不是主席树!?旁边HZ也表示同意,然后cGh队长就慢悠悠的过来:“想什么,USACO会有主席树!?” ↓打脸不解释,大家可以去%ta的博客(这样ta就不会D飞我了~)http ...