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

使用属性:

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. 使用Python将数据插入数据库(一)

    假如我现在有一个Excel数据表格,需要将其数据插入MySQL数据库中.数据如下: 对应的Python实现代码如下: #导入需要使用到的数据模块 import pandas as pd import ...

  2. [转] ubuntu 下mongodb的安装-----这篇文章也不错

    在Ubuntu下进行MongoDB安装步骤 一. 在Ubuntu下最傻瓜的步骤(以下都在root用户下进行操作): 1.运行"apt-get install mongo" 如果遇到 ...

  3. day5-WordCount

    1.   wordcount示例开发 1.1. wordcount程序整体运行流程示意图 map阶段: 将每一行文本数据变成<单词,1>这样的kv数据 reduce阶段:将相同单词的一组k ...

  4. 在DIV中自己主动换行

    word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自己主动换行. 它们的差别就在于: 1,word-break:break-all 比如di ...

  5. Storm专题二:Storm Trident API 使用具体解释

    一.概述      Storm Trident中的核心数据模型就是"Stream",也就是说,Storm Trident处理的是Stream.可是实际上Stream是被成批处理的. ...

  6. 理解Android线程创建流程(转)

    /android/libcore/libart/src/main/java/java/lang/Thread.java /art/runtime/native/java_lang_Thread.cc ...

  7. Process类的使用

    Process process= new Process(); process.StartInfo.CreateNoWindow = true; process.StartInfo.UseShellE ...

  8. encodeURIComponent

    <script type="text/javascript"> function show(){ var f="#wer中文测试"; f = enc ...

  9. Android:内存控制及OOM处理

      1. OOM(内存溢出)和Memory Leak(内存泄露)有什么关系? OOM可能是因为Memory Leak,也可能是你的应用本身就比较耗内存(比如图片浏览型的).所以,出现OOM不一定是Me ...

  10. 连接sql2008时报错

    最近把公司的项目搭建到本地(周末回家要加班),可是连接后,发现程序后台出错,错误信息:不支持此服务器版本.目标服务器必须是 SQL Server 2000 或更高版本. 本地是SqlServer200 ...