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
    评论
专栏目录
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实现评分效果
qq_37194256的博客
10-23 3561
js代码实现简单评分功能 我们经常可以在购物网站及快餐应用上看见评价页面,本文将讲述如何使用代码来实现评分效果; 具体实现的功能包括: 1、鼠标滑动点亮星星,移出时星星不亮; 2、鼠标点击可点亮星星,并且不可熄灭,同时,右侧出现对应评价; 3、点击已点亮的星星,不会更改先有的点亮颗数,同时,右侧评价也不会变. 代码如下: html部分: <body> <div> ...
《点击div改变颜色方法》
qq_42259086的博客
03-29 2827
以下代码在.vue文件中实现 1、把需要点击变色的字体放入list中,这里使用titleList 2、循环这个数组 3、在data中给i1赋值，次值为默认显示选中的div的index值 4、点击事件中给i1重新赋值 5、在自定义命名changecolor中设置点击变色的背景色或者阴影或字体设置。 效果如下： ...
原生js实现导航栏切换和点击更改折叠高度
m0_55173487的博客
06-27 619
原生js实现导航栏切换和点击更改折叠高度： 导航栏：点击可以切换内容；折叠按钮：根据点击次数来实现折叠的范围
js-实现点击循环变色问题
老衲的少女心i~
03-31 1585
代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js-点击循环变色事件</title> <style> #box { width: 200px; height: 200px; background-color: pink; cu
javascript经典特效---精彩的变色文字.rar
01-07
【描述】中提到的"精彩的变色文字.rar精彩的变色文字.rar..." 可能是由于描述的重复，实际上在强调这个压缩包内容的核心——变色文字特效。这种特效通常通过JavaScript代码来控制HTML元素（如`<span>`或`<p>`）的...
Html——粒子爆发（追光者）.zip
09-26
此外，JavaScript还可以响应用户的交互，比如鼠标移动或点击，使粒子特效与用户行为产生互动。 粒子特效的实现通常涉及到以下几个核心概念： 1. **粒子生成**：程序会根据设定随机生成一定数量的粒子，这些粒子可以...
jquery表格隔行变色鼠标滑过竖直表格内容变色效果
10-27
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
520节日代码方面的资源 在520节日期间，很多程序员和爱好者喜欢通过编写代码来表达爱意，以下是一些相关的代码资源： Pyt
最新发布
05-26
在这一天，很多程序员和技术爱好者选择用自己熟悉的方式——编写代码，来表达自己的情感。本文将详细介绍如何使用不同的编程技术和工具来创作520节日相关的代码作品。 ### Python绘制爱心图案 #### 使用场景 对于...
JQuery中文文档
07-14
为了更好地理解 JQuery 的优势，我们来看一个具体的例子——“隔行变色的表格”。 **例 10.1**：CSS 实现隔行变色的表格 在传统的纯 CSS 页面中，实现隔行变色需要手动为每个偶数行添加额外的 CSS 类，这不仅繁琐...
js循环遍历ul中li的点击事件，给给选中li添加css
热门推荐
感恩、奋进、自信
09-11 3万+
功能：对于一个ul中固定的li个数，当点击其中一个li时，改变选中li的颜色；同时改变对应的另一个ul中li的颜色页面初始化的界面：HTML： &lt;div &gt; &lt;label&gt;其他推荐:&lt;/label&gt; &lt;ul&gt; &lt;li c...
js 循环点击事件 改变背景颜色
Nicholas_long的博客
08-22 3271
老规矩先看效果: 这里使用的ul li标签这里就不上代码了很简单 下面就是重要部分： 使用的js获取id下li标签的长度当然你也可使用jquery 不做过多的讲解一目了然...
有多个按钮，点击一个变色，点击另一个变色，原来的恢复颜色的方法
weixin_33809981的博客
07-09 2802
<a class="btn btn-default changChick" onclick="changChick(this)">高</a> <a class="btn btn-default changChick" onclick="changChick(this)">中</a> <a class="btn btn-default cha...
js生成100个小盒颜色跟着循环
style201904的博客
05-11 1371
100个小盒 <script type="text/javascript"> var ipt = document.getElementById('ipt'); var ul = document.getElementsByTagName('ul')[0]; var colorarr = ['red','green','blue',...
vue遍历的数据点击之后相对的变色
几百块的博客
03-15 510
<div v-for="(item, index) in musicType" :key="item.type" :class="index == currentKey ? 'isActive' : 'types' + item.type" style="margin-left: 45px;cursor: pointer;" @click="changeType(item.type, index)" ...
遍历表格的每一行来改变点击的背景颜色，并且只触发一次和表格默认的时候对表格奇偶变化颜色问题
张亮亮的博客
07-17 739
问题一：我们在对表格的行进行点击事件，来改变本身行颜色变化 解决方法:   问题二：有时候我们要处理表格数据加载的时候就要对表格本身的行进行奇偶数来使不同的颜色变化 解决方法:     自定义表格的class  .tableBgColor { tbody&gt;tr:nth-child(odd) &gt;td {background-color:#dff0d8;} tbody&gt;tr:n...
JS如何设置获取盒模型对应的宽高
ZXH2017的博客
03-11 2973
dom.style.width/height(只适用获取内联元素的宽和高)dom.currentStyle.width/height(获取渲染后的宽高，但是仅IE支持)window.getComputedStyle(dom).width/height(与2原理相似，但是兼容性，通用性会更好一些)dom.getBoundingClientRect().widht/height(计算元素绝对位置，获取...
小程序在js设置data，循环点击改变tab的颜色
咔咔博客
10-10 1838
业务场景：点击对应的按钮颜色出现在对应的按钮上   实现步骤： 1.在html循环tabs数据 2.点击按钮，获取tab的id，和长度，开始循环，做判断即可，代码一看就懂 js设置tab代码： /* author:咔咔 wechat：fangkangfk address:陕西西安 */ tabs: [ { id: 0, ...
JavaScript之字符串常见的玩法(持续更新...)
shittihs的博客
11-08 249
整理了些字符串常用的玩法 1.去除字符串两边的空格 var str = " 来杯82年的咖啡 "; str = str.replace(/(^\s*)|(\s*$)/g, ""); //方法一 str = str.trim(); //方法二 2.字符串去重 //方法一：for循环(两次for消耗性能) function do...
js四个盒子点击变色
05-30
好的，下面是一个简单的实现方法： HTML 代码： ```html <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> ``` CSS 代码： ```css .box1, .box2, .box3, .box4 { width: 100px; height: 100px; background-color: #ccc; margin-bottom: 10px; cursor: pointer; } .box1.active, .box2.active, .box3.active, .box4.active { background-color: #f00; } ``` JavaScript 代码： ```javascript // 获取四个盒子元素 const box1 = document.querySelector('.box1'); const box2 = document.querySelector('.box2'); const box3 = document.querySelector('.box3'); const box4 = document.querySelector('.box4'); // 给四个盒子添加点击事件 box1.addEventListener('click', function() { this.classList.toggle('active'); }); box2.addEventListener('click', function() { this.classList.toggle('active'); }); box3.addEventListener('click', function() { this.classList.toggle('active'); }); box4.addEventListener('click', function() { this.classList.toggle('active'); }); ``` 这段代码会给四个盒子元素绑定点击事件，每次点击时切换它们的 `active` 类，从而改变它们的背景颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

烟敛寒林o

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

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

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

打赏作者

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

抵扣说明：

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

余额充值