javascript实现点击按钮变色

2024-10-02 22:47:19

本文实例为大家分享了javascript实现点击按钮变色的具体代码，供大家参考，具体内容如下

效果如下:

代码如下:

在这个案例中主要用到的是排他思想

html部分

输入我们所需要的按钮个数

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

css部分

<style type="text/css">
            button {
                border: 1px solid cornflowerblue;
                border-radius: 3px;
                margin-left: 14px;
            }
</style>

script部分

<script type="text/javascript">
    //获取所有按钮元素
    var btns = document.getElementsByTagName("button");
    //btns得到的值是一个伪数组  ,里面的每一个button元素都为btns[i]
    // console.log(btns);
    // 对数组进行遍历
    for (var i = 0; i < btns.length; i++) {
        //给每一个button按钮绑定点击事件
        btns[i].onclick = function () {
            // 先把所有的颜色全部清空
            for (var i = 0; i < btns.length; i++) {
                btns[i].style.backgroundColor = "";
            }
            //再把当前元素的背景颜色添加上
            this.style.backgroundColor = "pink";
 
        }
    }
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

AngularJS实现按钮提示与点击变色效果

本文用angularJS简单实现了一个小的按钮提示,按钮点击后会变色,注意html文件中需要引入jquery.js和angular.js 运行截图: 当点击按钮的时候按钮的样式改变: css代码: <style type="text/css"> *{margin: 0px;padding: 0px;} .bucSelectedButton{width: 100px;line-height: 30px;text-align: center;position: relativ
javascript实现点击按钮变色

本文实例为大家分享了javascript实现点击按钮变色的具体代码,供大家参考,具体内容如下效果如下: 代码如下: 在这个案例中主要用到的是排他思想 html部分输入我们所需要的按钮个数 <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</butto
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法.分享给大家供大家参考.具体分析如下: 这里点击按钮后,弹出一个可关闭的层窗口,随之网页背景变灰,在QQ网站上经常会看到QQ登录的效果,就和这个很类似,代码段基于JavaScript,根据你的情况使用,有时候是用CSS完成的这种功能. <html> <head> <meta http-equiv="Content-Type" content="text/htm
JavaScript实现点击按钮切换网页背景色的方法

本文实例讲述了JavaScript实现点击按钮切换网页背景色的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript用按钮随意变换背景颜色,每点击一下按钮,就可以随机改变一种网页背景颜色.颜色值事先是保存在JS的数组里,你在代码里会发现他们,若不想要某个颜色,就替换掉即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-btn-click-rand-bgcolor-codes/ 具体代码如下: <!DOCTYPE HTML
JavaScript实现点击按钮字体放大、缩小

本文给大家分享js实现点击按钮字体放大缩小实例代码,代码简单易懂,需要的朋友参考下吧具体代码如下所示: <style> .bb{color:red;} .cc{color:green;} .chapter {font-size: 1.5em;} .normal{font-size:12px;} .hidden{display:none;} </style> <script> $(document).ready(function() { $('div.aa').addC
javascript实现点击按钮让DIV层弹性移动的方法

本文实例讲述了javascript实现点击按钮让DIV层弹性移动的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
JavaScript实现点击按钮复制指定区域文本(推荐)

html5的webAPI接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能,不需要依赖flash. 代码如下: /* 创建range对象 */ const range = document.createRange(); range.selectNode(element); // 设定range包含的节点对象 /* 窗口的selection对象,表示用户选择的文本 */ const selection = window.getSelection(); if(selection.ra
javascript实现点击按钮切换图片

本文实例为大家分享了javascript实现点击按钮切换图片的具体代码,供大家参考,具体内容如下效果图: 首先搭建基本的结构 <div id="div"> <p id="desc"></p>  <img src="img/1.jpg" alt="加载失败" style="width: 800px;height: 400px;&qu
JavaScript实现点击按钮直接打印

很多网站都有此功能,当浏览到底部时都会有一个打印按钮,点击打印按钮就可以完成打印功能,功能非常不错,人性化,代码非常的简单. <a href="javascript:window.print()">我们</a> 也就是只要调用window.print()函数就可以实现打印当前页面. 但是上面的并不完美,因为有些网页上的很多内容都不需要打印,下面介绍一下如何打印页面中的指定内容. 代码如下: <!DOCTYPE html> <html> &
JavaScript实现点击按钮就复制当前网址

点击按钮复制当前网址: 在大量的网站都有这样的功能,当点击一个按钮的时候可以复制当前页面的地址,以此可以方便网站用户对链接的存储,同时也便于网站的推广,下面就结合实例介绍一下如何实现此功能: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/&quo
javascript实现点击按钮切换轮播图功能

本文实例为大家分享了js实现点击按钮切换轮播图的具体代码,供大家参考,具体内容如下菜单区域实现划过主菜单显示子菜单轮播区域实现 1.点击图片中左右箭头,分别跳转上一张与下一张 (1)点击上一张图其实就是让一个变量进行递减,点击下一张图就是让变量递增:(控制索引最大最小值) 2.点击右下角小圆也可以进行图片的跳转 (1)通过索引让变量进行随意的修改 3.每间隔3s进行轮播图的自动切换,鼠标放在图片上清除自动切换 (1)定时器 4.鼠标放在主菜单上显示子菜单,离开子菜单消失. 放在子菜单上显示

javascript实现点击按钮变色

相关推荐

随机推荐