以下是一个简单的JavaScript经典示例,用于展示DOM操作(文档对象模型):
一、基础概念
<html>
是根节点,<body>
是<html>
的子节点,而<div>
、<p>
等元素又可以是<body>
的子节点。document.getElementById()
来获取具有特定id
属性的元素,然后可以修改这个元素的属性(如innerHTML
、style
等)或者添加/删除子元素。二、示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>JavaScript DOM操作示例</title>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<button onclick="changeColor()">改变颜色</button>
<button onclick="changeSize()">改变大小</button>
<script>
function changeColor() {
var div = document.getElementById('myDiv');
div.style.backgroundColor = 'red';
}
function changeSize() {
var div = document.getElementById('myDiv');
div.style.width = '200px';
div.style.height = '200px';
}
</script>
</body>
</html>
三、优势
div
的颜色和大小。四、应用场景
没有搜到相关的文章