通过前面所有课程的学习，我们已经掌握了JS的基础语法知识和DOM对象的获取方式，下面我们通过一个实际的例子，将前面学过的知识进行一个简单的应用。
在以下代码中，我们想要实现两个功能
1、当单击显示和隐藏按钮时，可以控制图片的显示和隐藏效果。
2、当点击变色按钮时，可以改变页面中元素的背景颜色。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取页面元素案例</title>
</head>
<body>
<div>
<input type="button" value="显示">
<input type="button" value="隐藏">
<br>
<img src="lz.jpg" id="img" class="img">
</div>
<hr>
<div>
<p>班长</p>
<p>组长</p>
<p>组员</p>
<input type="button" value="变色">
</div>
<script type="text/javascript">
//1. 点击显示和隐藏按钮，控制图片的显示和隐藏效果
function yincang(){
var img = document.getElementById('img');
// console.log(img);
//设置css样式的语法 标签.style.样式名称 = 值；
//样式名称 如果有- 需要去掉-，后面的首字母大写 比如 font-size fontSize
img.style.display = 'none';
}
function xianshi(){
var img = document.getElementById('img');
// console.log(img);
//设置css样式的语法 标签.style.样式名称 = 值；
img.style.display = 'block';
}
//2. 点击 变色 按钮，改变p标签的背景色 red
function bianse(){
//获取所有p标签
var p = document.querySelectorAll('p');
// p 多个标签的一个类数组对象 不能直接通过style设置样式
// 遍历数组，取到每一个标签，单独设置样式
for(var i=0; i<p.length; i++){
// background-color
p[i].style.backgroundColor = 'red';
}
}
</script>
</body>
</html>
在上面我们用到了简单的事件绑定方式onclick，目前大家只要理解onclick="xianshi();"的意思是，当点击当前按钮时，触发xianshi这个函数即可，后面我们会深入讲解事件绑定的相关知识。
以上案例请务必理解，最好能够自己默写出来，大家先动手练习一下，然后再继续下面的学习。
|
窥视卡
雷达卡
发表于 2023-1-24 18:48:48
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-16 12:00:23
