获取标签以及简单的js事件
学习练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,
p {
width: 200px;
height: 200px;
background-color: red;
}
/* 设置鼠标悬停时的样式 */
div:hover {
background-color: blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<p id="p1"></p>
<script>
// getElementById()通过id属性值找到指定的标签.document 文档
var ppp = document.getElementById("p1");
var div = document.getElementById("div1");
// 修改p标签的背景颜色为蓝色
ppp.style.backgroundColor = "blue";
ppp.style.width = "300px";
//标签.style.样式="样式的值" 用来修改标签的样式
// onmouseenter当鼠标进入目标元素的时候触发的事件
//下边的代码的意思:当鼠标进入p标签的时候 就执行后面function的代码.function功能,函数
ppp.onmouseenter = function () {
// alert("xxxxx");
ppp.style.backgroundColor = "orange";
};
// 当鼠标离开目标触发元素的事件
ppp.onmouseleave = function () {
ppp.style.backgroundColor = "blue"
};
// css提供的:hover其实就是onmouseenter和onmouseleave的组合写法
// onclick当鼠标单击目标的时候触发事件
ppp.onclick = function () {
alert('我被点击了');
// 下边一句代码建议放在js开头的位置,因为该代码是在查找某一个标签,如果放在此处就代表每次点击就要从新查找一次,影响代码效率.而放在开头代表一开始就找到了该标签(只找一次),此后直接使用就行
// var div= document.getElementById(div1);
div.style.border = "5px solid blue";
//document.body可以直接找到body标签
document.body.style.backgroundColor="lightblue";
};
//作业:
// 1.页面红黄绿三个按钮点击,让body背景色为红 黄 绿
// 2.一个按钮点击一下bady是红色,再点击一下恢复原来颜色,再点击又变红色...
//3.探究题:下拉框效果(使用js实现)
</script>
</body>
</html>
3808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
