JS的一些简单应用 —— 点击变色(循环)且宽高不断增加

最新推荐文章于 2022-06-27 18:06:30 发布
最新推荐文章于 2022-06-27 18:06:30 发布
阅读量697 收藏 1
点赞数
分类专栏： ★ JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dyw_666666/article/details/80345296
版权 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style >
            .test1 {
                width: 300px;
                height: 300px;
                background: green;
            }

            .test2 {
                width: 300px;
                height: 300px;
                background: red;
            }
        </style>

        <script>
            function t() {
                var div = document.getElementsByTagName('div')[0];
                if(div.className.indexOf('test1') >= 0) {
                    div.className = 'test2';
                } else {
                    div.className = 'test1';
                }

                div.style.width = parseInt(div.style.width)+5+'px';
                div.style.height = parseInt(div.style.width)+5+'px';
                div.style.borderBottomWidth = parseInt(div.style.borderBottomWidth)+1+'px';
            }
        </script>
    </head>
    <body> 
        <div class="test1" onclick="t();" style="width:300px;height:300px;border-bottom:1px solid black;">
            点击div，使其背景色红绿交替
            宽高增加5px
            下边框增粗1px
        </div>
    </body>
</html>

点击前：
这里写图片描述

经过多次点击后：
这里写图片描述

烟敛寒林o
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript如何实现按钮动态点击切换变色————排他思想，给你独一无二！
weixin_45533907的博客
08-01 967
HTML代码 <button>易烊千玺</button> <button>迪丽热巴</button> <button>上官卿言</button> <button>古力娜扎</button> <button>慕容云海</button> JavaScript代码 var btns = document.querySelectorAll('button'); for(var i = 0; i
JavaScript小案例——表格隔行变色效果
最新发布
weixin_54645034的博客
10-02 909
本例主要通过鼠标经过事件来操作元素内容，具有一定的应用广泛性，操作简单，仅用于参考学习。
JS+html任意点击增加宽度高度和
09-26
任意点击增加宽度，JS应用 兼容多浏览器 0 引用 宽度缓冲{可设置参数} widt_a('woe1','601','text','woo1','woo1b') widt_b('woe1','601','text','woo1','woo1b') 高度缓冲{可设置参数} heig_a('hoe1','151','text','hoo1','hoo1b') heig_b('hoe1','151','text','hoo1','hoo1b') 显示或隐藏类 可设置参数 onclick="chas('noe2','noo2','隐藏1','显示1')"
JS之不断点击按钮来改变层的颜色
lishirong_李世荣的专栏
12-02 1400
级联测试 div.special{ background-color:red; height:50px; width:50px; margin-left:300px; } var n=1; function MyChoose(){ n++; if(n%2==0)MyChange(); if(n%2!=0)MyRestore(); } fu
java复杂循环变色问题_Java table逐行变色，点击变色
weixin_30490729的博客
02-25 148
tabletable{border-top:1px solid black;border-left:1px solid black;cursor:default;}td{border-bottom:1px solid black;border-right:1px solid black;height:23px;}function change(el){var ...
javascript小练习—点击将DIV变成红色（通过for循环遍历）
a550593504的专栏
05-19 439
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>点击将DIV变成红色</title> <style> body{font:12px/1.5 Tahoma;text-align:center;} ...
js-实现点击循环变色问题
老衲的少女心i~
03-31 1588
代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js-点击循环变色事件</title> <style> #box { width: 200px; height: 200px; background-color: pink; cu
JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放
曲鬼鬼的博客
10-22 3276
JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放 静态效果图如下： CSS部分 *{ margin: 0; padding: 0; } body{ user-select: none; } .banner{ position: relative;
Web API 排他操作案例 —— 表格隔行变色
赚钱养自个儿的博客
04-18 271
学习来源：https://www.bilibili.com/video/BV1HJ41147DG     思路 用到新的鼠标事件鼠标经过 onmouseover、鼠标离开 onmouseout 鼠标经过 tr 行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色 注意：第一行( thead 里面的行)不需要变换颜色，因此我们获取的是 tbody 里面的行 <!DOCTYPE html&g...
javascript经典特效---精彩的变色文字.rar
01-07
【描述】中提到的"精彩的变色文字.rar精彩的变色文字.rar..." 可能是由于描述的重复，实际上在强调这个压缩包内容的核心——变色文字特效。这种特效通常通过JavaScript代码来控制HTML元素（如`<span>`或`<p>`）的...
3.1点击3个按钮变宽变高变色
whiteGay的博客
10-30 282
事件：onclick 属性：width，height，background 用多参函数来简化，注意用onclick调用时的格式是function(){函数名(实参)} <!DOCTYPE html> ...
js实现评分效果
qq_37194256的博客
10-23 3565
js代码实现简单评分功能 我们经常可以在购物网站及快餐应用上看见评价页面,本文将讲述如何使用代码来实现评分效果; 具体实现的功能包括: 1、鼠标滑动点亮星星,移出时星星不亮; 2、鼠标点击可点亮星星,并且不可熄灭,同时,右侧出现对应评价; 3、点击已点亮的星星,不会更改先有的点亮颗数,同时,右侧评价也不会变. 代码如下: html部分: <body> <div> ...
原生js实现导航栏切换和点击更改折叠高度
m0_55173487的博客
06-27 619
原生js实现导航栏切换和点击更改折叠高度： 导航栏：点击可以切换内容；折叠按钮：根据点击次数来实现折叠的范围
js 循环点击事件 改变背景颜色
Nicholas_long的博客
08-22 3273
老规矩先看效果: 这里使用的ul li标签这里就不上代码了很简单 下面就是重要部分： 使用的js获取id下li标签的长度当然你也可使用jquery 不做过多的讲解一目了然...
点击后，变色，先前点击的不能恢复以前的颜色。
liu_jia_guo的专栏
08-23 1491
问题是，点击后，变色，先前点击的不能恢复以前的颜色。  第一个：设置listview的getview中的最外层界面的监听事件。 private class 最外层界面 implements OnClickListener { private int position; public SingleChoiceListener(int position) { this.pos
超链接（按钮）点击变色，原来的恢复原色
热门推荐
K先生的博客
04-03 1万+
网页超链接（按钮）点击变色，原来的恢复原色，这里所说的并不是利用css的link、hover、active所实现的，而是利用一小段js代码实现的。实现的效果为：我们看电影的时候，我们点击哪一集的链接，那么这个链接就会唯一变色，并且不会像css中的active失去焦点后恢复原色，能实时显示当前用户观看的电影集数。 原理：先定义一个变量t用来记录用户上一次点击的超链接id，当用户点击超链接的时候，会...
热电偶传感器在温度监测中的应用——变色涂料示温
本文将深入探讨计算机内部温度监控中的一种创新方法——利用变色涂料，以及与之相关的热电偶传感器的工作原理和应用。变色涂料作为一种直观的温度指示器，在电脑内部，特别是在CPU的散热风扇区域，发挥着重要的作用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

烟敛寒林o

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

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

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

打赏作者

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

抵扣说明：

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

余额充值