JS之不断点击按钮来改变层的颜色

最新推荐文章于 2022-10-29 20:30:34 发布
最新推荐文章于 2022-10-29 20:30:34 发布
阅读量1.4k 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lishirong/article/details/41674297
版权
<html>
<head>
<title>级联测试</title>
<style type="text/css">
div.special{
background-color:red;
height:50px;
width:50px;
margin-left:300px;
}
</style>
<script type="text/javascript" language="javascript">
var n=1;
function MyChoose(){
n++;
if(n%2==0)MyChange();
if(n%2!=0)MyRestore();
}
function MyChange(){
var getDiv=document.styleSheets[0].rules||document.styleSheets[0].cssRules;
getDiv[0].style.backgroundColor="green";
}
function MyRestore(){
var getDiv=document.styleSheets[0].rules||document.styleSheets[0].cssRules;
getDiv[0].style.backgroundColor="red";
}
</script>
</head>
<body bgcolor="#CCFFFF">
<div id="d1" class="special">第一层</div>
<div id="d2" class="special">第二层</div>
<div id="d3" class="special">第三层</div>
<input type="button" value="点击换色" onClick="MyChoose()"/>
</body>
</html>
李世荣
关注
专栏目录
js-点击div切换多个颜色
止水Itachi
04-01 968
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt...
js实现点击按钮随机生成背景颜色
10-14
在JavaScript中，我们可以利用事件监听和数学方法来实现点击按钮后随机生成背景颜色的功能。以下是对给定的标题、描述和代码内容的详细解释： ### 随机颜色生成原理 随机生成背景颜色的核心在于创建一个十六进制...
js点击按钮更改背景颜色
qq_45902653的博客
07-05 2451
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点击按钮更改背景颜色</title> <style> .body{ background-color:#fff; } .change{ background-color:#000; } </style> &lt.
网页换色。设置4个按钮，点击按钮网页背景变成对应的颜色
Lou__Lan的博客
10-29 1732
对通过document获取页面元素节点添加事件的考察。
js实现点击按钮切换背景颜色
wj624的博客
07-14 7713
js实现点击切换背景颜色 <!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"> &l
用js实现点击按钮修改div的颜色
psjasf1314的博客
04-11 2889
内容描述：当点击button按钮时修改div的颜色 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1 { width: 100px; height: 100px;
Javascript点击按钮随机改变数字与其颜色
10-21
通过`<style>`标签内部定义的CSS样式可以设置页面元素的显示效果，如按钮的位置、样式，以及被改变颜色和数字的`<span>`元素的样式等。 2. JavaScript基础：文档中展示了如何通过JavaScript来获取DOM元素，这里用到...
vue实现点击按钮切换背景颜色的示例代码
10-15
在Vue.js中，我们可以轻松地实现点击按钮切换背景颜色的功能。这个功能主要依赖于Vue的数据绑定和事件处理机制。以下是对给定代码的详细解释： 1. **数据绑定**：在Vue中，我们使用`v-bind`指令来绑定HTML元素的...
微信小程序实现点击按钮后修改颜色
10-15
当用户点击按钮时，`score`函数会被调用，改变`sty`和`score`的值，使得按钮的背景颜色从`#fff5df`变为`rgba(252,178,22, 0.3)`，达到颜色加深的效果。这样的实现方式简单易懂，同时也易于扩展到其他交互设计中。 ...
JS的一些简单应用 —— 点击变色(循环)且宽高不断增加
烟敛寒林的博客
05-17 697
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;style &amp;gt; .test1
JS实现的按钮点击颜色切换功能示例
10-19
主要介绍了JS实现的按钮点击颜色切换功能,涉及js鼠标事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
JS颜色控件
01-05
颜色控件，调用简单，可适用各类表单，样式调整简单，兼容性好！
点击按钮改变层的样式
02-03
点键钮改变层这是很经典的一个例子，在这里我给大家做了一点点修改
js实现点击div随机更换背景色
kilig
07-03 3591
原理先知： 使用background：rgb(r,g,b),三原色色值指定方式设置div的背景颜色，其中 r , g , b , 三个颜色值随机取到。 样式设置： html,body { height: 100%;} div { height: 100%;background-color: black;} PS:这里初始，设置样式，让div铺满整个屏幕。便于观察。 页面内容： <div id="test"><button id="btn">点我</button>&
JavaScript——点击事件按钮使div变色
CTSTD0812的博客
08-30 1935
JavaScript——点击事件按钮使div变色
JS 实现点击div换颜色
甘乐2333的博客
05-29 4350
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div0{ width: 100px; ...
js 点击实现div变大并且能够切换颜色
wwwwwwzzz的博客
06-24 1121
js 点击实现div变大并且能够切换颜色
点击更换背景颜色
weixin_44569910的博客
01-18 303
      开发工具：DW 关键技术：js 作者：陈溪 撰写时间：2019年1月18日   下面是一个简易的点击事件，首先给它一个div，在div里面给它一个id;在div标签里面给它一个p标签用来包裹input标签，在input标签里面给它一个button按钮和onclick点击事件。 ...
js：点击按钮随机生成背景颜色
horizon12的博客
09-02 2293
通过点击按钮更换整个页面的背景颜色 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
js 按钮点击 改变按钮颜色
最新发布
09-07
在JavaScript中，我们可以利用事件监听器来实现按钮点击后改变按钮颜色的效果。首先，我们需要为按钮添加一个点击事件监听器。可以通过获取按钮元素，然后使用`addEventListener`方法来实现。例如，假设我们的按钮有一个id为"myButton"，则可以通过以下代码来添加点击事件监听器： ```javascript const button = document.getElementById("myButton"); button.addEventListener("click", changeColor); ``` 在上面的代码中，我们使用`addEventListener`方法为按钮添加了一个名为"click"的事件监听器，并且指定了一个回调函数`changeColor`。 在`changeColor`函数中，我们可以使用DOM操作来改变按钮的颜色。可以通过获取按钮元素的样式属性，然后修改其颜色值。例如，我们可以将按钮的背景颜色修改为红色： ```javascript function changeColor() { const button = document.getElementById("myButton"); button.style.backgroundColor = "red"; } ``` 在上述代码中，我们获取了按钮元素的引用，并通过修改其`style`属性中的`backgroundColor`属性来改变按钮的背景颜色。 当按钮被点击时，`changeColor`函数会被调用，从而改变按钮的颜色为红色。这样，当我们点击按钮时，就可以实现改变按钮颜色的效果。 需要注意的是，上述代码只是演示了如何实现按钮点击后改变按钮颜色的简单效果。你还可以根据需要修改颜色值，或者添加其他样式属性，以实现更复杂的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值