Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
​
    <style type="text/css">
        #message {
            color: #ffffff;
            background-color: #ff0000;
            border-width: 10px;
            border-color: black;
            border-style: solid;
            width: 100px;
            height: 50px;
            padding: 50px;
        }
    </style>  
</head>
<body>
​
    <button id='toggle'>切換顯示狀態</button>
    <hr>
    這是一些文字！這是一些文字！這是一些文字！這是一些文字！這是一些文字！
    <div id="message">這是訊息一</div>
    這是其他文字！這是其他文字！這是其他文字！這是其他文字！這是其他文字！
​
<script type="text/javascript">
​
  function style(elem, prop) {
        return window.getComputedStyle(elem, null)[prop];
    }
​
    function show(elem) {
        elem.style.display = elem.previousDisplay || '';
        if(style(elem, 'display') === 'none') {
            // 在 DOM 樹上建立元素，取得 display 預設值後移除
            let node = document.createElement(elem.nodeName);
            document.body.appendChild(node);
            elem.style.display = style(node, 'display');
            document.body.removeChild(node);
        }
    }
​
    function hide(elem) {
        elem.previousDisplay = style(elem, 'display');
        elem.style.display = 'none';
    }
​
    document.getElementById('toggle').onclick = function() {
        let message = document.getElementById('message');
        if(style(message, 'display') === 'none') {
            show(message);
        }
        else {
            hide(message);
        }
    };
</script>  
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
JustinSDKpro
0viewers