点击按钮将8个div盒子都设置为红色

最新推荐文章于 2022-08-30 23:32:20 发布
最新推荐文章于 2022-08-30 23:32:20 发布
阅读量468 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pinkowonote/article/details/107685250
版权 
<!-- 点击按钮将8个div盒子都设置为红色:
1. 获取button和div对象
2. button上绑定点击onclick事件
3. 使用for循环来得到所有的div,将他们背景设置为红色:
for(var i = 0;i < odiv.length; i++){
   
    odiv[i].style.backgroundColor = "red";
    }
4. 顺序我要试试看
 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset
最低0.47元/天 解锁文章
pinkowonote
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 盒子属性 和 颜色属性
weixin_30451709的博客
07-14 300
盒子(Box) 属性 属性描述CSS overflow-x 如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。 3 overflow-y 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。 3 overflow-style 规定溢出元素的首选滚动方法。 3 rotation 围绕由 rotation-point 属性定...
Jquery基础_点击按钮使div背景变色_根据class_根据标签_所有都变色_一直动画_实例（二）
有 prepare , No out
07-18 3518
1 点击id为btn1的按钮，则id为one的div的样式 背景变为 特殊的绿色 $('#btn1').click(function(){ $('#one').css("background","#bfa"); }); 2  使得id为btn2的按钮点击，则类为mini的div 背景色全变为特殊绿色 //选择 class 为 mini 的所有元素 $('
JS首先使用div标签定义一个盒子，点击盒子来控制盒子的大小以及颜色。（1）盒子自身颜色为蓝色（2）第一次点击盒子区域，盒子变小并且颜色变黑色（3）再一次点击盒子区域，盒子恢复原来大小，但盒
WHT869706733的博客
11-25 3976
首先使用div标签定义一个盒子，点击盒子来控制盒子的大小以及颜色。 （1）盒子自身颜色为蓝色 （2）第一次点击盒子区域，盒子变小并且颜色变黑色 （3）再一次点击盒子区域，盒子恢复原来大小，但盒子颜色变成红色 要求：使用两种方式实现，第一种将盒子样式写在<script></script>代码里，第二种将盒子样式写在<style></style> <!DOCTYPE html> <html lang="en"> <head
2.1下拉菜单
uncle_Huang的博客
12-05 145
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
JavaScript(1)使用ducument.write()在页面上显示红色的“开启JavaScript学习之旅”。
weixin_43493559的博客
09-15 304
2、 输出方式练习 a) 使用alert：打开页面的时候，就出现一个alert框，显示“欢迎光临！”。 b) 使用ducument.write()在页面上显示红色的“开启JavaScript学习之旅”。 c) 使用console.log()：在控制台输出“希望JavaScript不要挂科”。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
10-23
主要介绍了JS实现点击按钮控制Div变宽、增高及调整背景色的方法,涉及javascript动态操作页面元素属性的相关技巧,适用于动态更换页面皮肤的功能,需要的朋友可以参考下
div盒子模型3.pdf
10-30
我们使用 CSS 样式来设置每个盒子的属性，例如页头的背景图像、导航栏的按钮样式、内容的标题和段落样式、版权的背景颜色等。 CSS 盒子模型是网页设计中的一种基本概念，理解盒子模型可以帮助我们更好地设计页面...
50个按钮样式css+div
05-04
3. 属性应用：通过`background-color`设置背景色，`color`改变文本颜色，`font-family`和`font-size`调整字体，以及`border-radius`实现圆角，这些基本属性可以初步创建一个按钮样式。 4. 鼠标状态：按钮的交互性...
css按钮、div等元素的流光+边框+滑动+文字覆盖+聚焦效果+水波样式
04-07
使用css实现多种特效 全部效果： 1.默认三种主题：确认、取消、警告，适用于以下所有特效 ...自定义内容丰富，所有效果均可自定义颜色、尺寸、动画速度、水面反光等 适用于快速开发，导入文件，引用对于类选择器即可
50个Div+CSS模板
02-16
3. **盒模型**：每个Div都是一个盒子，包含了内容(content)、内边距(padding)、边框(border)和外边距(margin)。理解盒模型对于布局至关重要，模板中各种不同宽度、高度、内边距和边框的设置，展示了盒模型在实际设计...
页面中所有的div标签，设置其背景为红色(用jQuery实现 )？
weixin_45651609的博客
08-13 1648
页面中所有的div标签，设置其背景为红色(用jQuery实现 )？
加深：2.CSS基础选择器
qq_61783164的博客
12-15 356
一、CSS选择器的作用--选择标签 以上CSS做了两件事: 1.找到所有的h1标签。选择器(选对人)。 2.设置这些标签的样式,比如颜色为红色(做对事)。 <div>我是div</div> <div>我是div</div> <p>我是段落</p> <ul> <li>我是ul里面小i哦</li> </ul> <ol> <li>我是ol里面小\i哦<
【完结】JQ-从0到1-总结
m0_59755550的博客
03-23 471
阶段一 01-jq的基本使用 两种页面加载完毕后执行js代码。 1. $('document').ready(function(){}); 2. $(function(){}); 02-$的解释 $是jq的别称即另外的名字，两者可以互相代替，因为都被系统识别为同一个东西。 03-$对象和dom对象 1.dom获取元素的方式:document.querySelector('元素')； 2.$获取是把dom元素进行包装的jq对象。 3.$对象只能使用jq的方法，dom对象使用原生的js属
JavaScript——点击事件按钮使div变色
CTSTD0812的博客
08-30 1885
JavaScript——点击事件按钮使div变色
用js(javascript)完成点击一个按钮会使相应的div背景颜色发生改变
热门推荐
qq_41485882的博客
09-03 1万+
用js(javascript)完成点击一个按钮会使相应的div背景颜色发生改变 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3...
实现按钮点击变色
yangl222的博客
04-23 4208
body { margin: 0; padding: 0; } .container { font-family: 微软雅黑; background: #fff; padding: 0px;
前端切图|点击按钮div变色
祈澈菇凉
05-11 1322
图片.png 图片.png &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;点击按钮div变色.html&lt;/title&gt; &lt;meta chars...
div样式操作
weixin_42461079的博客
06-25 173
点击切换样式： 代码：` div操作样式 </div> <button id="btn"> 点击切换样式</button> <div id="gray"></div> <div id="edit"> <h2>大小</h2> <p> &lt.
前端零基础教学开始第三天 03 -day _ Css 选择器 与 行内元素
weixin_34185560的博客
12-31 190
备注：部分选择器见02 教程 1、子元素选择器 子元素选择器只能选择作为某元素子元素的元素，其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接， 注意符号左右 两侧各保留一个空格 复制代码 .box > span{ color: red; font-size: 100px; } <div class="box"> <p...
写一个按钮，三个盒子，点击按钮时盒子背景颜色都变成蓝色
最新发布
06-03
好的，以下是一个简单的实现： ...点击我改变盒子颜色 <div class="box"></div> <div class="box"></div> <div class="box"></...当点击按钮时，JavaScript代码会为每个盒子添加 `blue` 类，使它们的背景颜色变为蓝色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值