原生JS實現點選一個按鈕顯示一個div，再點選按鈕div隱藏，或點選除div外其它空白處div隱藏

阿新 • • 發佈：2018-11-15

<!DOCTYPE html>
<html style="font-size: 24px">
<head>
    <title>js點選按鈕顯示再點選空白地方隱藏</title>
    <style type="text/css">
        #div {
            border: 1px solid red;
            display: flex;
            align-items: center;
            justify-content: center;
            display: none;
            font 
-size: 2rem
        }
    </style>
</head>
<body>
    <div id="div">這是div的內容</div>
    <button onclick="show()">點選我</button>
<script type="text/javascript">
    function show (event) {
        //取消冒泡
        let oevent = event || window.event
        if (document.all) {
            oevent.cancelBubble  
= true
        } else {
            oevent.stopPropagation()
        }
        if (document.getElementById('div').style.display === 'none' || document.getElementById('div').style.display === '') {
            document.getElementById('div').style.display = 'block'
        } else {
            document.getElementById( 
'div').style.display = 'none'
        }
    }
    document.onclick = function () {
        document.getElementById('div').style.display = 'none'
    }
    document.getElementById('div').onclick = function (event) {
        let oevent = event || window.event
        oevent.stopPropagation()
    }
    
</script>
</body>
</html>

原生JS實現點選一個按鈕顯示一個div，再點選按鈕div隱藏，或點選除div外其它空白處div隱藏

<!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js點選按鈕顯示再點選空白地方隱藏</title> <style type="text/css"&g

js如何實現點選一個按鈕顯示一個div，然後該div上有一個按鈕，點選此按鈕後隱藏，隱藏的同時顯示另外一個div，而在次彈出的div也有一個按鈕，點選後隱藏.

<button id="btn1" onclick="btn1()">報名</button> <div id="div1" style="background:#999999; display:none;"> <button id=

原生JS實現點選顯示再次點選隱藏

/** * [Show_Hidden 點選控制div顯示與隱藏] * @param {[id]} obj [需要顯示隱藏div的id] */ function Show_Hidden(obj) { var div = document.g

原生 js 實現點擊按鈕復制文本

js實現復制 ecc 標簽 type man com cti 瀏覽器以前有個需求就是復制粘貼，今天了解一下一根復制的原生js實現的效果 html: <p id="text">1234</p><input type="text" id="in

利用原生js實現自定義滾動條（可點選到達，拖動到達）

1.HTML檔案 div1是滾動條，div2是滾動小球，div3是文字區域容器，div4是文字區域。 <div id="div"> <div id="div1"> <div id="div2"> </div> </div&

原生js實現滑鼠點選切換效果

今天之所以寫一篇關於js的程式碼實現，一方面是因為個人習慣用jquery編寫程式碼，另一方面是因為github這個大平臺拋棄了jquery。 Jquery是一個js庫，極大簡化js程式設計，使用方便，相容性好，這篇文章就以一個例子來說明jq和js的編寫差別。首先我們看一下效果圖：

原生js實現一個自定義下拉單選選擇框

　　瀏覽器自帶的原生下拉框不太美觀，而且各個瀏覽器表現也不一致，UI一般給的下拉框也是和原生的下拉框差別比較大的，這就需要自己寫一個基本功能的下拉選單/下拉選擇框了。最近，把專案中用到的下拉框元件重新封裝了一下，以建構函式的方式進行封裝，主要方法和事件定義在原型上，下面是主要的實現程式碼並添加了比較詳細的註釋

原生js實現點擊復制功能

原生js實現點擊復制功能代碼： <input type="text"> <button>復制</button> <script> var input = document.getElementsByTagName(‘input‘)[0] var button =

原生js實現一個DIV的碰撞反彈運動

絕對定位 doc type har tle ntb inpu wid PE 原生js實現一個DIV的碰撞反彈運動：　　關鍵在於DIV的邊界檢測，進而改變運動方向，即可實現碰撞反彈效果。 <!DOCTYPE html> <html

如何用原生JS實現一個簡單的promise

　　　我又又又回來了，最近真是累的跟狗一樣，急需一個大保健回覆一下子精力　　　我現在是一邊喝著紅牛一邊寫著部落格，好了好了，不扯了，迴歸整體好吧　　　先簡單來說一下啥是promise吧　　　它是什麼？Promise是一個方案，用來解決多層回撥巢狀的解決方案。它現在是ES6的原生物件。　　 &n

原生JS實現一個完整的輪播圖

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

原生js實現複選框全選全不選

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全選和全不選</title> <script> function

原生JS實現全選全不選小demo

很久沒有寫部落格了，今天又回頭學習了一下原生JS 來寫了一個簡單的小demo，實現複選框的全選全不選的操作。實現的效果如下：具體程式碼： <!DOCTYPE html> <html> <he

原生js實現淘寶輪播圖，支援左右和跳轉（滑鼠點多快都不會亂）。

用transform是因為這個比left的效能好。這個是演示網址（不要直接存下來哦）：https://shalltears.github.io/test-sowing-map/ 。這個是完整程式碼下載地址，覺得還行的下載支援一下：https://download.csdn.ne

原生JS實現彩票36選7不重復（優化）

math utf-8 onclick indexof element 變量元素 inner str <!doctype html> <html> <head> <meta charset="utf-8"> <titl

原生JS實現滑鼠懸停圖片顯示文字效果

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <style> *{ margin:0;

原生js 實現table 被選中行變顏色

最近在做一個專案,因為框架原因,所有功能只能使用原生js開發(真的無語),碰到"實現table 被選中行變顏色"的需求,就在網上找了下,然後寫了一個js方法,只需要changeColorWithTrs(tableid)就可以實現(ps:也是為了自己方便引用,只要把table的

原生js實現音樂播放器功能，可以實時顯示歌詞並且高亮當前句

最近在做專案，總結一下學到的知識，首先就是一個簡單的音樂播放器。可以顯示歌詞，並且突出顯示當前播放的這一句。但是歌詞必須是要轉碼成utf-8的，不然是亂碼，後面提供我淘到的轉碼工具，非常簡單，把

原生JS實現ajax上傳檔案並顯示進度條

html程式碼 <progress id="progressbar" value="0" max="100" style="width:300px;"></progress>

原生JS實現的JSON陣列排序，關鍵字錨點跳轉到指定內容區

原生JS實現的仿點選錨點對應模組跳轉到指定的位置，錨點關鍵字從模組中取出，去除重複值按照由大到小的順序排序//JSON陣列按指定值進行排序排序,name:排序規則 function jsonSort(jsonarr,name,snum){ //如果陣列<=1,則直接返

原生JS實現點選一個按鈕顯示一個div，再點選按鈕div隱藏，或點選除div外其它空白處div隱藏

相關推薦