前言

HTML的DOM是JavaScript有能力对HTML作出反应，有时候，我们需要一些网页效果，为了更好地适应用户的效果，比如，我们平时接触，点击某个按钮，按下去的瞬间会变色，再比如，有时候鼠标经过的时候会显示下面的页面，离开时显示的页面消失，这些都可以通过JavaScript实现。

内容

点击按钮效果

运行效果

Demo

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
  6.  
  7. <script>
  8. function mDown(obj)
  9. {
  10. obj.style.backgroundColor="#1ec5e5";
  11. }
  12.  
  13. function mUp(obj)
  14. {
  15. obj.style.backgroundColor="green";
  16. }
  17. </script>
  18. </body>
  19. </html>

鼠标事件控制显示页面

运行效果

Demo

  1. <span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <div onmouseover="mOver()" onmouseout="mOut()" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
  6. <br>
  7. <br>
  8. <div id="demo" onload="my()" style="background-color:red;width:120px;height:10px;padding:40px;"><strong>欢迎光临</strong></div>
  9. <script>
  10. function mOut()
  11. {
  12. document.getElementById('demo').style.visibility='hidden'
  13. }
  14.  
  15. function mOver()
  16. {
  17. document.getElementById('demo').style.visibility='visible'
  18. }
  19. </script>
  20. </body>
  21. </html></span>

JavaScript之DOM实践的更多相关文章

  1. JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素

    一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...

  2. 2 JavaScript应用开发实践指南

    JavaScript 语言在浏览器中的运用 HTTP请求,加载HTML后根据内容加载CSS等,大部分浏览器默认2个下载链接. HTML元素要尽可能简洁,不需要将Table元素变成多个div, css代 ...

  3. JavaScript本地存储实践（html5的localStorage和ie的userData）

    http://www.css88.com/archives/3717 JavaScript本地存储实践(html5的localStorage和ie的userData) 发表于 2011年06月11日  ...

  4. JavaScript BOM DOM 对象

    title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...

  5. javascript --- javascript与DOM

    javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...

  6. JavaScript与DOM

    文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...

  7. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  8. JavaScript与DOM的关系

    JavaScript与浏览器的工作 1.浏览器获取并加载你的页面,从上至下解析它的内容. 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码. 浏览器还会建立一个HTML页面的 ...

  9. JavaScript学习笔记(2)——JavaScript和DOM的关系

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...

随机推荐

  1. java代码List

    总结:代码代码你认得我吗? package com.c2; import java.util.ArrayList; //list import java.util.List; public class ...

  2. MySQL执行计划的讲解

    最近同事在执行线上执行一条MySQL的查询语句,数据的话在9000条左右,但使用左连接的时候查询速度大概在15秒左右~这速度确实是无法接受的~ 经过简单的修改,变为内连接的话,执行速度不到1秒. 下面 ...

  3. Spring学习八

    1: Tomcat容器四个等级? Container, Engine,  Servlet容器, Context 真正管理Servlet的容器是Context容器:一个context对应一个web工程. ...

  4. 已有项目使用Asset Pipeline管理静态资源

    1.    修改项目中指向静态资源文件的链接 a) 访问静态资源文件 <%= stylesheet_link_tag "application", media: " ...

  5. 【转】onclick事件与href='javascript:function()'的区别

    href='javascript:function()'和onclick能起到同样的效果,一般来说,如果要调用脚本还是在onclick事件里面写代码,而不推荐在href='javascript:fun ...

  6. EM算法以及推导

    EM算法 Jensen不等式 其实Jensen不等式正是我们熟知的convex函数和concave函数性质,对于convex函数,有 \[ \lambda f(x) + (1-\lambda)f(y) ...

  7. 问题：C#根据生日计算属相；结果：C#实现根据年份计算生肖属相的方法

    这篇文章主要介绍了C#实现根据年份计算生肖属相的方法,涉及C#数组与字符串的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下   本文实例讲述了C#实现根据年份计算生肖属相的方法.分享给大家供大家 ...

  8. Arduino Uno 在win7 64位下的驱动问题

    1.解压[mdmcpq.inf_amd64_neutral_fbc4a14a6a13d0c8.rar],将[mdmcpq.inf_amd64_neutral_fbc4a14a6a13d0c8]文件夹复 ...

  9. repeater的command事件用法

    当Repeater里面循环控件时就会用到command, 是Repeater控件的原生事件用法 Repeater里面如果循环控件,控件的ID是会被改变的 repeater.itemcommand+= ...

  10. STM32 C++编程 003 USART(串口)类

    使用 C++ 语言给 STM32 编写一个 Usart 类 我使用的STM32芯片:STM32F103ZET6 我们使用的STM32库版本:V3.5.0 注意: 想学习本套 STM32 C++编程 的 ...