鼠标点击DIV后,DIV的背景变色(js)

<!DOCTYPE html>
<html>
<head>
<script>
    window.onload = function(){
        var divs = document.getElementsByTagName("div");
        var len = divs.length;
        for(var i=0;i<len;i++){
            divs[i].onclick = function(){
                for(var j=0;j<len;j++){
                    divs[j].style.backgroundColor = "black";
                }
                this.style.backgroundColor = "red";
            };
        }
    };
</script>
</head>
<body>
<div id="div1" style="width:100px;height:100px;background:black;margin:10px;"></div>
<div id="div2" style="width:100px;height:100px;background:black;margin:10px;"></div>
<div id="div3" style="width:100px;height:100px;background:black;margin:10px;"></div>
<div id="div4" style="width:100px;height:100px;background:black;margin:10px;"></div>
</body>
</html>
时间: 2024-11-04 05:14:38

鼠标点击DIV后,DIV的背景变色(js)的相关文章

sendmessage()模拟鼠标点击

{鼠标软模拟:好处就是不会真的移动鼠标 开始按钮 坐标 x=386y=387 }sendmessage(hookHwnd,messages.WM_LBUTTONDOWN ,0,$0180017A); {按下鼠标左键}sendmessage(hookHwnd,messages.WM_LBUTTONUP ,0, $0180017A); {抬起鼠标左键}{硬件模拟:会真的移动鼠标}mouse_event(MOUSEEVENTF_LEFTDOWN,X ,Y ,0,0);mouse_event(MOUSE

delphi7 怎么让button按钮跟着鼠标点击dbgrideh数据行移动

delphi7 怎么让button按钮跟着鼠标点击dbgrideh数据行移动 在 dbgrid的DBGridCellClick 事件中加上: Delphi/Pascal code 1 2 3 4 5 6 7 8 9 10 11 var   x, y : integer ;   P: TPoint; begin   GetCursorPos(P);   Edit1.Text := Format('X: %d, Y: %d',[P.X, P.Y]);   x := frMainTest.Left ;

鼠标点击input时,placeholder中的提示信息消失

html代码: <input type="text" placeholder="请输入"> 鼠标点击input时,placeholder中的提示信息消失: <input type="text" placeholder="请输入" onfocus="this.placeholder=‘‘" onblur="this.placeholder=‘请输入‘">

JS实现用键盘控制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/1999/xhtml"> <head> <meta http-equiv="Content-

使用JS或jQuery模拟鼠标点击a标签事件代码

原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" href="abc.aspx" style="visibility: hidden;">下一步</a> $("#alink").click(); // 触发了a标签的点击事件,但是没有触发页面跳转 document.getEleme

使用jQuery模拟鼠标点击a标签事件

来源于:https://mo2g.com/view/42/ <html> <head> <meta charset="UTF-8"> <title>磨途歌-A标签测试3</title> </head> <body> <a href="http://www.mo2g.com">磨途歌</a> </body> </html> <scr

jQuery实现鼠标点击Div区域外隐藏Div

摘录自:http://www.crackedzone.com/jquery-click-div-outside-hide-div.html jQuery本身没有这样一个事件,要实现这个效果,我们首先要先了解javascript中的事件冒泡. 冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层.(摘自网络) 1. 阻止事件冒泡, 并不阻止事件行为:event.s

jquery 实现鼠标点击div盒子移动功能

// Start 窗口的拖动 var _move=false; //移动标记 var _x,_y; //鼠标离控件左上角的相对位置 $(document).ready(function(){ $(".box h4").click(function(){ // alert("click");//点击(松开后触发) }).mousedown(function(e){ var _this = $(".box"); if(!_move){ _move=t

鼠标点击TextBox控件后清空默认字体

方案(一) 脚本: <script type="text/javascript" language="javascript"> //得到焦点时触发事件 function onFocusFun(element, elementValue) { if (element.value == elementValue) { element.value = ""; element.style.color = ""; } } /