您的位置：首页 > Web前端 > CSS

DOM文档对象模型-THML/CSS/事件

2017-10-27 09:59 211 查看

这仅仅是自己的学习笔记，只为记录自己的成长。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM文档对象模型</title>
<script>
function change(id){
id.innerHTML="我是新内容"
}
</script>
</head>
<body onload="alert('hello')">
<p id="p1" onclick="change(this)">Hello World!</p>
<img id="image" src="" />
<button onclick="document.getElementById('p1').style.color='#00ff00'">点击这里</button>
<script>
document.getElementById("p1").innerHTML="改变HTML内容";
document.getElementById("image").src=""; //改变html的属性
document.getElementById("p1").style.color="#ff0000"; //改变HTML的样式
</script>
<button id="myBtn">为button元素分配事件</button>  //这是绑定事件另外一种方式，还有一种是直接在元素里添加事件
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
alert(Date())
}
</script>

<div style="width: 200px; height: 200px; color: blue; background: black;" onmouseover="mOver(this)" onmouseout="mOut(this)">请把鼠标移到这里</div>
<script>
function mOver(id){
id.innerHTML="你好"
}
function mOut(id){
id.innerHTML = "请把鼠标移到这里"
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航