今天,我首先对之前学习的内容进行了复习,然后学习了当鼠标指向某一个按钮时,切换对应的背景图片。

  <div id="d1">
  </div>
  <input type="button" value="1" onmouseover="dj1()" id="j1" class="c1" style="background-color:#6F3"/>
  <input type="button" value="2" onmouseover="dj2()" id="j2" class="c1"/>
  <input type="button" value="3" onmouseover="dj3()" id="j3" class="c1"/>

  

<script>
  var a=document.getElementById("j1");
  var b=document.getElementById("j2");
  var c=document.getElementById("j3");
  function dj1()
  {
    var aa=document.getElementById("d1");
    aa.style.backgroundImage="url(6UPCKHIN3K5O0006.jpg)";
    a.style.backgroundColor="#6F3";
    b.style.backgroundColor="#CCC";
    c.style.backgroundColor="#CCC";
  }
  function dj2()
  {
    var aa=document.getElementById("d1");
    aa.style.backgroundImage="url(22.jpg)";
    a.style.backgroundColor="#CCC";
    b.style.backgroundColor="#6F3";
    c.style.backgroundColor="#CCC";
  }
  function dj3()
  {
    var aa=document.getElementById("d1");
    aa.style.backgroundImage="url(002-1.jpg)";
    a.style.backgroundColor="#CCC";
    b.style.backgroundColor="#CCC";
    c.style.backgroundColor="#6F3";
  }
</script>

  之后,我学习了利用Window.document操作内容、样式和属性。

  alert(a.innerHTML);标签里的html代码和文字都获取了

  a.setAttribute("属性名","属性值");设置一个属性,添加或更改都可以;

  a.getAttribute("属性名");获取属性的值;

  a.removeAttribute("属性名");移除一个属性;

网页 JavaScript的DOM操作的更多相关文章

  1. 第一百一十六节,JavaScript,DOM操作样式

    JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

  2. 第一百一十五节,JavaScript,DOM操作表格

    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

  3. Python之路day13 web 前端(JavaScript,DOM操作)

    参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...

  4. 网站开发综合技术 三 JavaScript的DOM操作

    第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...

  5. JavaScript:DOM操作

    一.DOM基础DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某 ...

  6. JavaScript之DOM操作,事件操作,节点操作

    1,DOM操作 1.1  概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...

  7. Javascript的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

  8. HTML JavaScript的DOM操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...

  9. JavaScript的DOM操作(2)

    补充:   回车符\r和换行符\n的区别:\r 相当于enter,是段落与段落之间的区别, \n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大 ...

随机推荐

  1. HDU 5895 Mathematician QSC

    矩阵快速幂,欧拉定理. $g(n)$递推式:$g(n)=5g(n-1)+5g(n-2)-g(n-3)$,可以构造矩阵快速求递$n$项,指数很大,可以利用欧拉定理降幂. #pragma comment( ...

  2. HTML中<title>与<h1>区别

    1)<title>标签表示的标题是整个网页的名字,即在浏览器顶部的tab栏里显示的.搜索引擎通过它来搜索网页:<title>标签里的文本不出现在页面内容里面. <h1&g ...

  3. shell-逐行读取文件

    代码: #!/bin/bash echo 方法1 while read line do echo $line; done < testdata echo "" echo 方法 ...

  4. MVC 的 视图中 @section 是什么作用?

    可以定义一个渲染块,这个渲染块可以在LayoutPage里面引用,使用Html.RenderSection("section名称"); 可以指定一个bool参数指定如果Conten ...

  5. [Q]pdfFactory虚拟打印机的安装

    安装打图精灵过程中会提示是否安装pdfFactory虚拟打印机,建议选择安装. 若未安装,在安装打图精灵之后想安装pdfFactory,该软件可以在打图精灵应用程序文件夹下找到( 系统"开始 ...

  6. 【Loadrunner】初学Loadrunner——场景设计

    在使用Loadrunner的时候,常常需要使用到场景设计.但是怎么设计一个满意的场景?如何开展? 首先可以点击tools > Create Controller Scenario > OK ...

  7. wpf为ListBox添加渐变

    <Style.Triggers> <Trigger Property="ListBox.AlternationIndex" Value="1" ...

  8. CCF-CSP 最大的矩形

    问题描述 在横轴上放了n个相邻的矩形,每个矩形的宽度是1,而第i(1 ≤ i ≤ n)个矩形的高度是hi.这n个矩形构成了一个直方图.例如,下图中六个矩形的高度就分别是3, 1, 6, 5, 2, 3 ...

  9. EFI Shell 命令说明

    EFI Shell 命令说明 引导命令 — EFI Shell 与 nPartition 引导有关的命令. autoboot         设置(查看)自动引导超时变量. bcfg 显示(或修改)驱 ...

  10. 生成元(Digit Generator,ACM/ICPC Seoul 2005,UVa 1583)

    #include<cstdio>#include<cstdlib>#include<cstring>using namespace std;int t, n, a, ...