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

  <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. tablesorter周边文档

    一.简介: Tablesorter​作用于一个标准的HTML表格(有THEAD,TBODY),实现静态排序:主要特点包括: (1) 多列排序: (2) 支持文本.URI地址.数值.货币.浮点数.IP地 ...

  2. ajax使用json

    json是什么什么的废话不说了,去百度吧.我这里介绍一下我为何要使用json.我使用ajax响应返回值时,项目中需求要返回多个值,不能只返回一个值.这时候就想起来用到json了.这可能只是json的一 ...

  3. Openjudge-NOI题库-垂直直方图

    题目描述 Description 写一个程序从输入文件中去读取四行大写字母(全都是大写的,每行不超过72个字符),然后用柱状图输出每个字符在输入文件中出现的次数.严格地按照输出样例来安排你的输出格式. ...

  4. 搭建git代码服务器

    在代码管理中,通常需要使用版本管理工具,git就是一个不错的选择,这里简单罗列一下git服务器的搭建过程. 1. 安装git工具包 2. 初始化git库:在代码服务器上,通常只需要创建一个不含有工作目 ...

  5. php的redis的pconnect

    1. 当使用pconnect时,连接会被重用,连接的生命周期是fpm进程的生命周期,而非一次php的执行. 2.如果代码中使用pconnect, close的作用仅是使当前php不能再进行redis请 ...

  6. myeclipse连接数据库oracle

    package xsl; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStat ...

  7. Jenkins2.32.1+svn+maven安装配置与构建部署

    这两天学习了一下持久化集成工具Jenkins,在自己的本地搭建一个简单的Jenkins环境. 使用环境:Windows64系统,JDK1.8,eclipse,svn(Windows版本VisualSV ...

  8. autoconfig操作小结

    1.添加maven配置在pom文件中 <profile>     <id>prod</id>     <properties>         < ...

  9. Java中泛型的理解

    Java中的泛型,本质上来说,就是是参数化类型,就是说所操作的数据类型被指定为一个参数,而不是确定的某种类型.这种数据类型可以用在类.接口和方法创建中.即泛型类.泛型接口.泛型方法.这样说可能不够生动 ...

  10. jQuery(3)——DOM操作

    ---恢复内容开始---   jQuery中的DOM操作 [DOM操作分类] DOM操作分为DOM Core(核心).HTML-DOM和CSS-DOM三个方面. DOM Core:任何一种支持DOM的 ...