当前位置:网站首页>Pro2:修改div块的颜色
Pro2:修改div块的颜色
2022-07-07 15:40:00 【静Yu】
作者主页:静Yu
🧡简介:CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家,前端知识交流社区创建者
社区地址:前端知识交流社区
🧡多种源码领取:各种福利满满
什么是JavaScript?
一开始的网页就是单纯的静态网页,为了使用户能与网页交互,设计出了JavaScript语言。JavaScript语言就是一种可以用来给网页添加交互性的·语言。我们平时听到对JavaScript的描述一般是这是一门脚本语言。脚本语言就是在浏览器执行的一种语言,是一段程序并不是软件。脚本语言可以添加到使用html和css构建的网站中,在网页加载时会自动执行,并实现各种页面的动态效果,在页面交互起到重要的作用。
实现目标
点击按钮将黑色的四个小方块变成红色,再次点击将红色的变成黑色
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
button{
display: block;
margin: 0 auto;
}
#container{
width: 330px;
margin: 10px auto;
}
#container div{
width: 100px;
height: 100px;
margin: 0 5px;
background-color: black;
display: inline-block;
}
</style>
</head>
<body>
<button onclick="cli()">将黑色div变成红色</button><br>
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
// 先获取div的子节点
var divs=document.getElementById("container").children;
//获取按钮
var btn=document.getElementsByTagName("button")[0];
//点击事件的方法
function cli()
{
if (btn.innerHTML === '将黑色div变成红色'){
for (var i = 0; i < 4; i++) {
divs[i].style.backgroundColor = "red";
}
btn.innerHTML = "将红色div变成黑色";
}
else {
for (var i = 0; i < 4; i++) {
divs[i].style.backgroundColor = "black";
}
btn.innerHTML = "将黑色div变成红色";
}
}
</script>
</body>
</html>
实现效果
实现方法
.children
获取子元素集合
getElementsByTagName()
方法可返回带有指定标签名的对象的集合,这里我们直接获取按钮标签<button>
.
onclick
事件会在元素被点击时发生,
innerHTML
属性设置或返回表格行的开始和结束标签之间的 HTML。
先获取<div>
块下的子节点,一共四个<div>
,然后再获取button
标签,
点击事件:返回标签之间的HTML如果是将黑色div变成红色,将<div>
的backgroundColor
属性设置为红色,反之同理。
边栏推荐
猜你喜欢
Examen des lois et règlements sur la sécurité de l'information
测试3个月,成功入职 “字节”,我的面试心得总结
A tour of grpc:03 - proto serialization / deserialization
DevOps 的运营和商业利益指南
深入浅出【机器学习之线性回归】
Siggraph 2022 best technical paper award comes out! Chen Baoquan team of Peking University was nominated for honorary nomination
【信息安全法律法规】复习篇
第2章搭建CRM项目开发环境(数据库设计)
麒麟信安加入宁夏商用密码协会
【TPM2.0原理及应用指南】 1-3章
随机推荐
【网络攻防原理与技术】第1章:绪论
Solid function learning
测试3个月,成功入职 “字节”,我的面试心得总结
在窗口上面显示进度条
L1-027 出租(Lua)
Please insert the disk into "U disk (H)" & unable to access the disk structure is damaged and cannot be read
Enum + Validation 的个人最佳实践 demo 分享
【TPM2.0原理及应用指南】 16、17、18章
赋能智慧电力建设 | 麒麟信安高可用集群管理系统,保障用户关键业务连续性
《世界粮食安全和营养状况》报告发布:2021年全球饥饿人口增至8.28亿
mysql官网下载:Linux的mysql8.x版本(图文详解)
第1章CRM核心业务介绍
ViewSwitcher的功能和用法
【OKR目标管理】价值分析
【网络攻防原理与技术】第6章:特洛伊木马
Establishment of solid development environment
深度学习-制作自己的数据集
The mail server is listed in the blacklist. How to unblock it quickly?
目标检测1——YOLO数据标注以及xml转为txt文件脚本实战
How to implement safety practice in software development stage