onblur属性详解

onblur 事件会在对象失去焦点时发生，所谓焦点指的就是当前操作的对象，当我们操作一个div时，这个div就获取了焦点，那么onblur的作用是什么呢，在我们需要实现类似点击其他部分取消当前下拉框显示的功能时，onblur属性就要开始显现作用了。

下面是一个实例：

<!DOCTYPE html>
<html><head><title>我的文件</title><style>body{background:#f0f0f0;}.left-button{width:100px;height:28px;font-size:13px;background: #4386f5;border-radius:3px;line-height:28px;text-align:center;margin-left:61px;margin-top:18px;color:#fff;cursor:pointer;}.show-new-content{height: 40px;margin-top: 3px;margin-left:1px;}.show-new-content-image{width:24px;height:24px;float:left;margin-top:8px;margin-left:10px;}.show-new-content-text{height: 26px;float:left;color:#000;font-size:12px;line-height:26px;margin-top:7.5px;margin-left:20px;} .show-new{width: 212px;height: 411px;display: block;background:#fff;margin-top: 3px;border: 0.1px solid #ddd;box-shadow: 1px 1px 4px #ddd;border-radius: 3px;position: absolute;display:none;}</style></head><body><div class="left-button" onclick="show('creat')" onblur="hiddendiv()" tabindex="0">新建<div id="creat" class="show-new"><div class="show-new-content"><div class="show-new-content-image"></div><div class="show-new-content-text">新建文件夹</div></div></div></div><script>var i = 0;function show(obj){document.getElementById(obj).style.display = "block";}function hiddendiv(){document.getElementById("creat").style.display = "none";}function creatDiv(){var div = document.getElementById("content");div.innerHTML += '<div class="content-div">'+'<div class="content-div-div">'+'<img class="content-div-div-img" src="https://assets.processon.com/chart_image/thumb/5b6d4053e4b053a09c2e8847.png"/>'+'</div>'+'</div>';}</script></body>
</html>

onblur属性详解相关推荐

python中文读音ndarray-numpy中的ndarray方法和属性详解
NumPy数组的维数称为秩(rank),一维数组的秩为1,二维数组的秩为2,以此类推.在NumPy中,每一个线性的数组称为是一个轴(axes),秩其实是描述轴的数量.比如说,二维数组相当于是一个一维数 ...
spring MVC请求处理类注解属性详解
spring MVC请求处理类注解属性详解
Meta http-equiv属性详解
Meta http-equiv属性详解博客分类: Web综合 HTML浏览器IECache搜索引擎 http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮 ...
JavaScript Function.arguments 属性详解
转载自 JavaScript Function.arguments 属性详解 arguments属性是正在执行的函数的内置属性,返回该函数的arguments对象.arguments对象包含了调用 ...
vertical-align属性详解
vertical-align属性详解:http://www.cnblogs.com/wcp-spring/archive/2013/03/04/2942456.html 关于vertical-alig ...
border-sizing属性详解和应用
box-sizing 用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有 content-box . border-box 和 inherit 三种取值. inherit 指的是从父元素继 ...
Flash播放控件属性详解
Flash 播放控件属性详解一.属性篇 1.AlignMode(读写) 语法:AlignMode As Long 说明:对齐方式(与SAlign 属性联动).当控件的长宽比例与影片不一致且WMo ...
android layout_width 属性,android：layout_weight属性详解
在android开发中LinearLayout很常用,LinearLayout的内控件的android:layout_weight在某些场景显得非常重要,比如我们需要按比例显示.android并没用提 ...
html5 规定输入字段,HTML5 Input属性详解
本篇教程探讨了HTML5 Input属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < value 属性 value 属性规定输入字段的初始值: rea ...
nemesis什么车_狂野飙车9TrionNemesis介绍 S级车Trion复仇女神属性详解
狂野飙车9S级车Trion Nemesis介绍,狂野飙车9S级车Trion复仇女神属性详解,下面雨落就为大家带来狂野飙车9S级车Trion复仇女神的改装升级所需卡牌已经金币等攻略. [赛车属性]: S ...

onblur属性详解

onblur属性详解相关推荐

最新文章

热门文章