前言

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

内容

点击按钮效果

运行效果

Demo

<!DOCTYPE html>

<html>

<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>

function mDown(obj)

{

obj.style.backgroundColor="#1ec5e5";

}

function mUp(obj)

{

obj.style.backgroundColor="green";

}

</script>

</body>

</html>

鼠标事件控制显示页面

运行效果

Demo

<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html>

<html>

<body>

<div onmouseover="mOver()" onmouseout="mOut()" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<br>

<br>

<div id="demo" onload="my()" style="background-color:red;width:120px;height:10px;padding:40px;"><strong>欢迎光临</strong></div>

<script>

function mOut()

{

document.getElementById('demo').style.visibility='hidden'

}

function mOver()

{

document.getElementById('demo').style.visibility='visible'

}

</script>

</body>

</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. GWT实现平滑移动图片效果

    在一些网站的首页上,顶部总会存在一些平滑移动的图片,一般用来投放广告或者业务介绍.多个图片只在一个区域展示,仅通过一些方法来不停的移动这个区域的图片来达到展示多个图片的目的.如果是普通的网页,使用Jq ...

  2. HTML5通信

    跨文档消息传输 HTML5中提供了在网页文档之间互相接收与发送信息的功能.使用这个功能只要获取到网页所在窗口对象的实例,无论是否同源都可以实现跨域通信.经常用于不同frame之间的通信. 当我们想要接 ...

  3. [置顶] C语言itoa()函数和atoi()函数详解(整数转字符C实现)

    头文件:#include <stdlib.h> atoi() 函数用来将字符串转换成整数(int),其原型为: int atoi (const char * str); [函数说明]ato ...

  4. c语言-构建一个静态二叉树

    第一.树的构建 定义树结构 struct BTNode { char data; struct BTNode* pLChild; struct BTNode* pRChild; }; 静态方式创建一个 ...

  5. 2011-03-17免Oracle客户端连远程Oracle的方法

    1.http://www.oracle.com/technetwork/topics/winsoft-085727.html上下载对应版本的instanctclinet zip包 34M 解压后92M ...

  6. python 函数对象、函数嵌套、名称空间与作用域、装饰器

    一 函数对象 一 函数是第一类对象,即函数可以当作数据传递 1 可以被引用 2 可以当作参数传递 3 返回值可以是函数 3 可以当作容器类型的元素 二 利用该特性,优雅的取代多分支的if def fo ...

  7. DDD学习笔录——提炼问题域之知识提炼与协作

    提炼问题域的意义 理解一个复杂问题域以便创建简单且有用的模型需要深入详尽的知识以及深刻的见解,这些只能通过与从内到外理解该领域的人协作得到.对模型的设计进行连续实验和探究正是DDD的能力所能实现的.只 ...

  8. 嵌入式Linux启动优化手记2&nbsp;U…

    参考一下 原文地址:U-boot优化">嵌入式Linux启动优化手记2 U-boot优化作者:ZhaoJunling 既然不能使用新的U-boot,那就优化一点是一点,慢慢干吧. 1. ...

  9. taglib标签在web.xml文件中报错的解决办法

    报错的原因分析: 在jsp2.0中,且2.4版的DTD验证中,taglib描述符,正确写法是放到<jsp-config></jsp-config>描述符中.所以,我们的tagl ...

  10. findall查找 ^$*+?{ }{m,n}[].[.] \w \s \d \b \D \W

    #!/usr/bin/env python import re r = "aasa da.5a5dfgfda ada" ret = re.findall('a',r) print( ...