码迷,mamicode.com
首页 > 其他好文 > 详细

BOM

时间:2016-08-13 15:26:25      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

一、改变 HTML

1.改变 HTML 输出流

在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。

document.write(Date());

2.改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容,请使用这个语法:

document.getElementById(id).innerHTML=新的 HTML
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>

3.改变 HTML 属性

如需改变 HTML 元素的属性,请使用这个语法:

document.getElementById(id).attribute=新属性值
<script>
document.getElementById("image").src="landscape.jpg";
</script>

二、HTML DOM - 改变CSS

1.改变 HTML 样式

如需改变 HTML 元素的样式,请使用这个语法:

document.getElementById(id).style.property=新样式
<script>
document.getElementById("p2").style.color="blue";
</script>

2.使用事件

HTML DOM 允许我们通过触发事件来执行代码。

<button type="button" 
onclick="document.getElementById(‘id1‘).style.color=‘red‘">
点我!</button>

3.Visibility

<input type="button" value="隐藏文本" onclick="document.getElementById(‘p1‘).style.visibility=‘hidden‘" />
<input type="button" value="显示文本" onclick="document.getElementById(‘p1‘).style.visibility=‘visible‘" />

三、HTML DOM 事件

1.

onclick=JavaScript

<h1 onclick="this.innerHTML=‘Ooops!‘">点击文本!</h1>

2.

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>

3.

<button onclick="displayDate()">点这里</button>

4.

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

四、HTML DOM EventListener

1.addEventListener() 方法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

技术分享 注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。

2.removeEventListener() 方法

 

 

BOM

标签:

原文地址:http://www.cnblogs.com/vervin/p/5767911.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!