前言

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. Linux驱动 - 多线程之 完成量

    Linux 系统提供了一种比信号量更好的同步机制,即完成量(completion ,它用于一个执行单元等待另一个执行单元执行完某事. Linux 系统中与 completion 相关的操作主要有以下 ...

  2. PostgreSQL 日常数据库维护工作

    日常数据库维护工作定期备份,定期”清理“数据库,周期性的日志文件管理check_postgres可用于检测数据库的健康并报告异常情况 1. 日常清理 PostgreSQL数据库要求周期性的清理维护.对 ...

  3. 腾讯Web前端开发框架JX(Javascript eXtension tools)

    转自:Web前端开发-Web前端工程师 » 腾讯Web前端开发框架JX(Javascript eXtension tools) JX – Javascript eXtension tools 一个类似 ...

  4. 五颜六色的记事本 Notepad2.cn

    这是一款五颜六色的记事本,支持同时五种颜色的标签录入,可随意切换. 考虑到使用者的用眼舒适度,特意采用颜色对比明显并且色调柔和的配色方案,选择通用的微软雅黑字体作为编辑字体,字体工整便于识别. 针对使 ...

  5. delphi 在线程中运行控制台命令(console)

    在编程开发的时候,我们时常会调用windows本身的功能,如:检测网络通断,连接无线wifi等. 虽然,用 windows api 操作可以完美地完成这些操作,但是,函数参数太难了.令人望而生畏,不是 ...

  6. IT求职经验分享

    本来这些东西应该早点写出来,之前由于一些事情的顾虑迟迟没有发表下笔整理并发表出来.最近及接下来的日子是校招找工作的关键时期,结合自己之前找暑期实习的过程及笔试面试经历(主要是三家,腾讯.360.绿盟科 ...

  7. select 动态添加option函数

    转自:https://lym6520.iteye.com/blog/309937 经常会用到select动态添加元素,写了个方法,方便调用!  ... /** * 功能:select对象动态添加Opt ...

  8. logstash日志写入kafka

    安装kafka curl -L -O https://mirrors.cnnic.cn/apache/kafka/0.10.2.1/kafka_2.10-0.10.2.1.tgz tar xf kaf ...

  9. elastic(8)版本控制

    转自: http://www.cnblogs.com/AK47Sonic/p/7563393.html elasticsearch 版本控制: 内部版本控制 外部版本控制 内部版本控制: 内部版本会检 ...

  10. Xshell的简单使用

    1.下载并安装 Xshell 4打开后如下图所示,会出现一个界面框,这个界面框类似于DOS的界面,需要操控远程的主机,都是通过这个界面进行操作. 2在这个界面左上角的位置有一个文件按钮,点击这个按钮. ...