onblur属性详解
生活随笔
收集整理的這篇文章主要介紹了
onblur属性详解
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
onblur 事件會(huì)在對(duì)象失去焦點(diǎn)時(shí)發(fā)生，所謂焦點(diǎn)指的就是當(dāng)前操作的對(duì)象，當(dāng)我們操作一個(gè)div時(shí)，這個(gè)div就獲取了焦點(diǎn)，那么onblur的作用是什么呢，在我們需要實(shí)現(xiàn)類似點(diǎn)擊其他部分取消當(dāng)前下拉框顯示的功能時(shí)，onblur屬性就要開始顯現(xiàn)作用了。
下面是一個(gè)實(shí)例：
<!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>?
總結(jié)
以上是生活随笔為你收集整理的onblur属性详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SPECTRUM高速数据采集卡在RADA
- 下一篇： 【Flask】官方教程(Tutorial