前言

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. jsp 的url传参中文乱码问题解决办法

    在js文件中,使用连接jsp的url传参,如果参数是中文会出现乱码问题,如下可以解决: 方法一:(已确认 可行) String username = new String(request.getPar ...

  2. [转]ubuntu 网络配置 作者:Yudar

    检查网络配置命令:ifconfig 一.通过配置文件配置 新手没怎么用过Ubuntu,所以走了不少弯路,网上找了很多方法,大都没对我起到帮助作用,所以把自己的配置方法写一写. Ubuntu上连了两块网 ...

  3. Zookeeper学习(八)：Zookeeper的数据发布与订阅模式

     http://blog.csdn.net/ZuoAnYinXiang/article/category/6104448 1.发布订阅的基本概念        1.发布订阅模式可以看成一对多的关系:多 ...

  4. Oracle RMAN 学习

    Oracle RMAN 学习:三思笔记 1 进入rman Rman--物理备份(结构/数据) 1 本地db Cmd set oracle_sid=orcl 1 rman target / Rman&g ...

  5. jenkins学习 01 jenkins介绍

    jenkins 是一个可扩展的持续集成引擎. 使用Jenkins目的: 持续.自动地构建/测试软件项目. 监控一些定时执行的任务. jenkins拥有的特性: 易于安装,只要jenkins.war部署 ...

  6. 未在本地计算机上注册 Microsoft.ACE.OLEDB.12.0 提供程序

    Visual Studio 8使用了Access数据库,provider选择了ACE.OLEDB,但是运行时出现了错误,提示未在本地计算机上注册"Microsoft.ACE.OLEDB.12 ...

  7. PowerDesigner CDM中取消默认不能存在同名主键的方法

    This data item is already used in a primary identifier.Normalization rules prevent ... 处理的方法为: 菜单栏上的 ...

  8. Solaris10如何确认DirectIO是否已经启用

    对于Oracle而言,如果数据库存储在UFS文件系统上,启用DirectIO能够提高数据库性能.Oracle有个参数filesystemio_options可以控制数据库是否使用DirectIO.  ...

  9. nginx upstream的几种配置方式

    nginx 的upstream目前支持4种方式的分配 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器 ,如果后端服务器down掉,能自动剔除. 2.weight指定轮询几率,weigh ...

  10. docker 笔记 （5）常用命令

    images    显示镜像列表 history   显示镜像构建历史 commit    从容器创建新镜像 build     从 Dockerfile 构建镜像 tag       给镜像打 ta ...