2021-05-28 点击不同的按钮可改变盒子的相应样式

最新推荐文章于 2023-11-03 10:50:01 发布
最新推荐文章于 2023-11-03 10:50:01 发布
阅读量608 收藏 1
点赞数
分类专栏： 项目与应用 文章标签： css dom js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rowlet/article/details/117233302
版权
本文介绍了如何通过为不同按钮绑定点击事件，并利用JavaScript操作CSS DOM来改变盒子的样式。通过示例代码展示具体实现过程。
摘要由CSDN通过智能技术生成

思路:

给每个按钮绑定点击事件,事件中用cssDOM改变盒子样式
代码:
html:

    <input type="button" onclick="widFn()" value="宽">
最低0.47元/天 解锁文章
前端OnTheRun
关注
专栏目录
js案例——输入属性及属性值设置盒子样式
qq_43151638的博客
10-18 572
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .inp{ width: 100px; height: 100px; margin: 10px aut...
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
m0_67266787的博客
02-24 832
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
盒子左右方向渐变色，当鼠标点击后盒子和方形和圆形中切换
m0_70871698的博客
08-04 462
新手，学习中。如果有其他更好的方法喜欢可以分享出来哟
js实现点击盒子后修改颜色和宽度
黄大仙
08-04 3378
<style> div { width: 200px; height: 200px; background-color: pink; } </style> <div></div> <script> var div = document.querySelector('div'); div.onclick = functio
避坑17_Vant-Tabbar点击两次样式才能切换
linxwx的博客
11-06 1453
将Tabbar用在统一的父组件内即可
vue实现单击一个按钮后，切换盒子的展开和收起状态
qq_46556714的博客
11-11 3953
实现单击一个按钮后，切换盒子的展开和收起状态 !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">
JavaScript实现拖拽盒子效果
11-21
包括一个不可点击的超链接，一个可拖拽的盒子，以及一个包含“关闭”和“可拖拽”文本的蓝色盒子。超链接的`href`属性设置为`javascript:void(0);`以防止页面跳转。 ```html (0);" id="register">点击注册 ...
CSS中盒子样式的几种设置
Tai_hua的博客
12-07 2915
css背景颜色设置：可以将盒子背景设置一定的颜色。如： <style> .box { width: 300px; height: 300px; background-color: red; } </style> 背景图片设置：需要使用 background-image 属性来设置，而图片的路径需要写在 “url()”的括号内，如果背景图片并没有所设容器大，将会把背景图平铺后再显示...
JS首先使用div标签定义一个盒子，点击盒子来控制盒子的大小以及颜色。（1）盒子自身颜色为蓝色（2）第一次点击盒子区域，盒子变小并且颜色变黑色（3）再一次点击盒子区域，盒子恢复原来大小，但盒
WHT869706733的博客
11-25 4074
首先使用div标签定义一个盒子，点击盒子来控制盒子的大小以及颜色。 （1）盒子自身颜色为蓝色 （2）第一次点击盒子区域，盒子变小并且颜色变黑色 （3）再一次点击盒子区域，盒子恢复原来大小，但盒子颜色变成红色 要求：使用两种方式实现，第一种将盒子样式写在<script></script>代码里，第二种将盒子样式写在<style></style> <!DOCTYPE html> <html lang="en"> <head
js点击按钮切换盒子
Asuria
06-09 6855
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{ padding: 0; margin: 0;
做一个简单的根据按键不同改变盒子颜色
m0_62907534的博客
01-20 819
文章目录前言一、效果展示二、步骤1.搭建html+css2.书写jQuery 前言 不知不觉过了这么久了，突然学完了js,进入jQuery的学习，后面也要继续努力啊！ 一、效果展示 二、步骤 1.搭建html+css <div class="wrap"> <h1>按键改变颜色</h1> <div id="bgChange"> keyCode为： <span id="k
html更改盒子颜色,盒子随机跳并且变化颜色.html
weixin_35433770的博客
06-15 1704
Document.box {position: absolute;top: 0;left: 0;width: 100px;height: 100px;background-color: pink;}var oDiv = document.querySelector('.box');var timer;//最大值var maxTop = window.innerHeight - oDiv.offse...
html的重置按钮reset无反应,reset() 按钮没有反应？？？
weixin_33219985的博客
05-30 1428
源自：4-1 编程挑战reset() 按钮没有反应？？？HTML>javascriptbody{font-size:12px;}#txt{height:400px;width:600px;border:#333solid1px;padding:5px;}p{line-height:18px;text-indent:2em;}JavaScript课程JavaScript为网页添加动态效果并...
js 点击实现div变大并且能够切换颜色
wwwwwwzzz的博客
06-24 1149
js 点击实现div变大并且能够切换颜色
html点击按钮状态改变,点击按钮改变CSS样式
weixin_34622572的博客
05-30 2301
点击按钮改变CSS样式* {padding:0px;margin:0px;}.box {width:300px;height:300px;border:1px solid #CBC4F7;font-size:13px;margin:100px auto;}.divWidth {width:400px;}.divHeight {height:400px;}.divBgColor {backgroun...
点击 选中该元素， 改变当前点击元素的样式，其他元素样式不变
xx2410653967的博客
03-15 1760
js方法。
前端盒子点击后增加边框页面样式会发生改变 如何解决
2202_75390830的博客
11-03 319
元素的边框宽度会包含在元素的总宽度和高度内，防止元素大小发生变化。要在点击一个盒子时，使其增加2px的边框，而不导致页面布局改变，你可以使用CSS的。类名，这个类名的样式会使其边框颜色变为黄色（示例中是#ffcc00）。，增加边框并不会导致元素的大小发生变化，因此页面布局不会改变。）添加了一个初始状态的边框样式，并将。在上述代码中，我们给每个盒子（方法给对应的盒子添加一个。
事件方法 控制 css样式变化
weixin_60415789的博客
09-06 361
事件方法 控制 css样式变化
Vue 之 解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法
热门推荐
weixin_45092437的博客
09-05 1万+
通过官方文档可以得知两个重点：① 通过v-html生成的页面元素，不会被当做Vue模板进行编译，只会作为普通的html代码被插入，也就是说通过v-html插入的html@click、v-if等，则不会生效，因为他们没有被Vue编译，而浏览器并不会识别这些vue语法，所以这些语法都不生效。② 在.vue文件中如果style标签上增加了scoped属性，那么该标签内的样式就不会对v-html生成的页面元素起作用，还是因为这些元素没有被当做Vue模板进行编译，所以不生效。
盒子高亮切换大小vue
最新发布
09-14
你可以使用`v-if`或`v-show`指令来控制元素的显示和隐藏，配合`:style`绑定动态样式来改变盒子的尺寸。 首先，在HTML模板中，可以定义一个按钮和一个容器元素： ```html 切换大小 , height: boxHeight }" v-bind:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值