JS基础学习:操作DOM案例
2019-04-01 本文已影响0人
Merbng
点击按钮显示图片
<body>
<input type="button" id="btn" value="点击按钮显示图片" />
<img src="" id="im">
<!-- 根据id获取按钮 -->
<!-- 为按钮注册点击事件，添加事件处理函数 -->
<!-- 根据id获取图片的标签，设置图片的src属性值 -->
<script type="text/javascript">
var btnObj = document.getElementById('btn');
btnObj.onclick = function() {
var imgObj = document.getElementById('im');
imgObj.src = "images/img1.jpg";
// 设置图片的大小
imgObj.width = "300";
imgObj.height = "300";
};
</script>
</body>
点击按钮修改a标签的地址和热点文字
<body>
<input type="button" name="" id="btn" value="显示效果" />
<a id="ak" href="http:www.baidu.com">百度</a>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var obj = document.getElementById('ak');
obj.href = "http://www.jd.com";
obj.innerText = "京东";
};
</script>
</body>
点击按钮修改p标签的内容
<body>
<input type="button" name="" id="btn" value="设置p的内容" />
<p id="p1"></p>
<script type="text/javascript">
var btnObj = document.getElementById('btn').onclick = function() {
var pObj = document.getElementById('p1');
pObj.innerText = "这是一个p";
};
</script>
</body>
点击按钮修改多个p标签的文字
<body>
<!-- document.getElementsByTagName（“标签的名字”）； 返回的是一个伪数组-->
<input type="button" name="" id="btn" value="显示效果" />
<p>阿么么么么</p>
<p>阿么么么么</p>
<p>阿么么么么</p>
<p>阿么么么么</p>
<p>阿么么么么</p>
<p>阿么么么么</p>
<p>阿么么么么</p>
<p>阿么么么么</p>
<div id="d1">
<p>阿么么么么</p>
<p>阿么么么么</p>
<p>阿么么么么</p>
<p>阿么么么么</p>
</div>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var pObjs = document.getElementsByTagName('p');
for (i = 0; i < pObjs.length; i++) {
pObjs[i].innerText = "啊，修改结构钢"
}
var pObjs=document.getElementById('d1').getElementsByTagName('p');
for (i = 0; i < pObjs.length; i++) {
pObjs[i].innerText = "啊，div里面的";
}
};
</script>
</body>
点击按钮修改图片的alt和title属性
<body>
<input type="button" name="" id="btn" value="显示效果" />
<img src="images/img1.jpg" alt="广告" title="提提">
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var imgObjs = document.getElementsByTagName('img');
imgObjs[0].alt = "这是alt";
imgObjs[0].title = "阿卡健康科技";
};
</script>
</body>
点击按钮显示隐藏div
<body>
<input type="button" id="btn" value="显示/隐藏" />
<div id="dv">
</div>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var divObj = document.getElementById('dv');
if (divObj.style.display == "none") {
divObj.style.display = "block";
} else {
divObj.style.display = "none";
}
};
</script>
</body>
点击按钮设置div样式
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
<style type="text/css">
.cls {
width: 100px;
height: 100px;
background-color: pink;
border: 5px solid skyblue;
}
</style>
</head>
<body>
<input type="button" name="" id="btn" value="设置样式" />
<div id="dv">
</div>
<script src="js/common.js"></script>
<script type="text/javascript">
my$("btn").onclick = function() {
var dvObj = my$("dv");
// dvObj.style.width = "300px";
// dvObj.style.height = "300px";
// dvObj.style.backgroundColor = "red";
// dvObj.style.border = "10px solid black";
// 在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用className
dvObj.className = "cls"
};
</script>
</body>
</html>
在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用className
网页开关灯效果
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.cls {
background-color: black;
}
</style>
</head>
<body>
<input type="button" name="" id="btn" value="开关灯" />
<script src="js/common.js">
</script>
<script type="text/javascript">
my$('btn').onclick = function() {
document.body.className = document.body.className != "cls" ? "cls" : "";
};
</script>
</body>
</html>
