onclick事件改变元素的背景颜色

最新推荐文章于 2023-04-14 10:35:45 发布
原创 最新推荐文章于 2023-04-14 10:35:45 发布 · 8.9k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个简单的HTML页面，该页面包含五个不同颜色的按钮。当用户点击这些按钮时，页面上的一个黑色div的背景色会变为所点击按钮的颜色。通过JavaScript实现了这一交互功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onclick事件</title>
    <script type="text/javascript" src="$function.js"></script>
</head>
<body>
    <button style="background:red">红</button>
    <button style="background:yellow">黄</button>
    <button style="background:green">绿</button>
    <button style="background:blue">蓝</button>
    <button style="background:purple">紫</button>

    <div id="divid" style="width:500px;height:500px;background:black">

    </div>
</body>

    <script type="text/javascript">
        var buttons = $imgs("button");
        for(var i=0;i< buttons.length;i++){
            buttons[i].onclick = function(){
                $("divid").style.background = this.style.background;
            }
        }
    </script>

</html>
利用onlick设置背景颜色
Lnnmy的博客
11-27 346
利用onlick设置背景颜色 利用onlick设置背景颜色 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 二、使用 1.利用DOM可以完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作库 代码如下（示例）： div { width:100px; height:100px; background-colo
html边框点击之后变色,onclick永久性更改html标题的边框颜色，直到另一个被点击...
weixin_39971138的博客
06-22 1220
目前我有一些可点击的框，当我将鼠标悬停在它们上面时，它们会改变颜色。当我点击并按住一个特定的盒子时，它会改变颜色(通过使用：在css中有效)onclick永久性更改html标题的边框颜色，直到另一个被点击是否有反正我可以使边框颜色永久变化直到点击不同的盒子？的：除了我活跃的房地产没有保持举行的鼠标 我的代码：？ 飞行viewer.htmlFlights {{flight.number}}You h...
利用鼠标点击事件改变页面的背景颜色
09-10
用Sublime Text文本编辑器编写 鼠标点击事件：页面显示的结果与鼠标点击的次数有关
onclick改变颜色_javascript 随机改变页面背景颜色
weixin_39953356的博客
01-31 740
html 代码<input id="bg-btn" class="bg-btn" type="button" value="页面随机变色1" /><input id="bg-btn2" class="bg-btn" type="button" value="rgb页面随机变色" /><input id="bg-btn3" class="bg-btn" type="bu...
菜单样式-实现onclick改变背景色效果
车月
10-09 2244
今天搞了一个菜单样式，要实现菜单被单击之后改变背景色 同时在其它菜单被单击时改变已单击菜单背景色   html代码：   ${smu.menu_name} js代码： var i = null; funct
JS 点击事件onclick：点击对象小区域颜色，大区域颜色改变
幻
08-10 2856
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;
原生JS操作网页给p元素添加onclick事件及表格隔行变色
10-26
在本篇内容中，将讨论如何使用原生JS来实现给网页中的所有段落（p元素）添加onclick事件，以及如何实现一个特定表格的隔行变色效果。 首先，了解onclick事件是非常基础且重要的。onclick事件属于JavaScript中事件...
javascript使用onclick事件改变选中行的颜色
10-26
总结起来，这个示例展示了如何利用JavaScript的`onclick`事件和`onmouseover`事件来改变HTML表格中行的背景颜色，以实现交互式的选择效果。这种方法使得用户在网页上的操作更加直观和易于理解，提高了用户体验。在...
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
10-18
在JavaScript编程中，有时我们可能需要在同一DOM（文档对象模型）元素上同时绑定`onClick`事件和`onDblClick`事件。`onClick`事件在用户单击元素时触发，而`onDblClick`事件则在用户双击元素时触发。然而，问题在于...
JavaScript onclick事件使用方法详解
11-20
JavaScript中的`onclick`事件是网页交互的核心组成部分，它允许开发者定义当用户点击DOM元素时执行的特定功能。本文将深入探讨`onclick`事件的工作原理、使用方法以及几个实用示例。 `onclick`事件是一个内联事件...
取消a标签或者onclick在移动端点击时的背景颜色
weixin_30340353的博客
01-19 341
一、取消a标签在移动端点击时的蓝色 1 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 2 -webkit-user-select: none; 3 -moz-user-focus: none; 4 -moz-user-select: none; 二、使用图片作为a标签的点击按钮时，当触发touchstart的时候，...
鼠标单击TR实现行变色效果，再次单击恢复原色
lscbfntxgt的博客
09-27 962
鼠标单击TR实现行变色效果，再次单击恢复原色  个人摸索出来的，先来张效果图： 一，javaScript 代码部分（注意传参问题） /* 知识点5：单击某TR依照条件来变色（多参数传递方式） 知识点6：如何取标签的属性，内容等 如：tab.style.backgroundColor(取颜色) */ //单击某TR变色 function do_o
编写js代码，点击相应的按钮使得网页背景颜色发生改变
hey，欢迎浏览我的博客，希望能给你提供帮助。
12-05 4565
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>改变网页背景色</title> <script> function color(
onclick事件——更改li标签背景图片
weixin_30549657的博客
04-29 650
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>无标题</title> 5 <style type="text/...
js onclick点击事件改变皮肤
qq_42467563的博客
10-19 656
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;点击换&lt;/title&gt;         &lt;link id="skin" rel="stylesheet" ty
js使用onclick方法实现点击表格整行/列变色
h220801__zzl的博客
09-07 1967
js dom阶段学习作业
使用js实现单击按钮，让他改变颜色
weixin_70079360的博客
04-14 4386
按钮1按钮2按钮3按钮4按钮5按钮
html按钮点击过后改变背景颜色,用获取节点的方式实现点击按钮改变标签背景颜色的问题...
weixin_34169503的博客
06-22 2130
跟着视频敲的,视频里的能实现,我的不行,有onclick事件,但是背景色不变html>点击设置p标签背景色div{width:200px;height:400px;border:1pxsolidred;}这是一个span这是一个p这是一个span这是一个p这是一个span这是一个p这是一个amy$("btn").onclick=function(){//获取divvar...
JavaScript onclick事件深入解析与示例
"JavaScript onclick事件使用方法详解，包括事件触发、语法、示例代码和实际应用，帮助读者理解和掌握JavaScript中处理鼠标点击的onclick事件。" JavaScript 的 `onclick` 事件是一个非常常用的事件处理程序，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值