js控制div點選隱藏顯示

阿新 • • 發佈：2019-01-28

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="http://www.softwhy.com/"/>
    <title>點選切換</title>
    <style type="text/css">
        #thediv {
            width: 200px;
            height: 50px;
            background: #ccc;
            display: none;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var obt = document.getElementById("bt");
            var odiv = document.getElementById("thediv");

            function getStyle(obj, attr) {  //  誰的      那個屬性
                if (obj.currentStyle)  // ie 等
                {
                    return obj.currentStyle[attr];
                }
                else {
                    return window.getComputedStyle(obj, null)[attr];  // w3c 瀏覽器
                }
            }
            //console.log(getStyle(odiv, 'display'));
            obt.onclick = function () {
                //獲取的樣式需要寫在點選事件裡面，寫在外面只能獲取一次，不能動態獲取，
                if (getStyle(odiv, 'display') == "none") {
                    odiv.style.display = "block";
                    obt.value = "隱藏模組";
                }
                else {
                    odiv.style.display = "none";
                    obt.value = "顯示模組";
                }
            }
        }
    </script>
<body>
<input type="button" id="bt" value="顯示模組"/>
<div id="thediv"></div>
</body>
</html>

以上為第一種

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="http://www.softwhy.com/"/>
    <title>點選切換</title>
    <style type="text/css">
        #thediv {
            width: 200px;
            height: 50px;
            background: #ccc;
            display: none;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var obt = document.getElementById("bt");
            var odiv = document.getElementById("thediv");
            obt.onclick = function () {
                if (odiv.style.display== "block") {
                    //第一判斷時將none改為block即可避免第一次點選無效的問題
                    odiv.style.display = "none";
                    obt.value = "顯示模組";
                }
                else {
                    odiv.style.display = "block";
                    obt.value = "隱藏模組";
                }
            }
        }
    </script>
<body>
<input type="button" id="bt" value="顯示模組"/>
<div id="thediv"></div>
</body>
</html>

以上為第二種

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>螞蟻部落</title>
    <style type="text/css">
        #thediv{
            width:200px;
            height:50px;
            background:#ccc;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var obt=document.getElementById("bt");
            var odiv=document.getElementById("thediv");
            obt.onclick=function(){
                if(odiv.style.display=="none"){
                    odiv.style.display="block";
                    obt.value="隱藏模組";
                }
                else{
                    odiv.style.display="none";
                    obt.value="顯示模組";
                }
            }
        }
    </script>
<body>
<input type="button" id="bt" value="顯示模組"/>
<div id="thediv" style="display:none"></div>
</body>
</html>

以上為第三種

js控制div點選隱藏顯示

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.c

js或jquery實現點選某個按鈕或元素顯示div,點選頁面其他任何地方隱藏div

點選某個元素顯示div,點選頁面其他任何地方隱藏div，可用javascript和jquery兩種方法實現：一：javascript實現方法技巧 <script> //定義stopPropagation 方法的使用，該方法將停止事件的傳播，阻止它被分派到其他 Document 節點。

js/jq 點選按鈕顯示div,點選頁面其他任何地方隱藏div

整個複製可看效果 1. JS效果 <!DOCTYPE html> <html> <head> <meta http-equiv="Content

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 禁止冒泡點選頁面空白處,隱藏特定的div

<!doctype html> <html> <head> <title>demo</title>

JQuery控制div外點選隱藏，div內點選不會隱藏

比如有個div其id為body，實現在div外點選隱藏，div內點選不隱藏，採用jQuery實現如下： $("#body").click(function(e) { $(this).show()

一些簡單的js技術實現點選的js隱藏顯示

首先這是一個js的方法然後獲取模組的屬性根據模組的屬性設定隱藏和顯示 function showoopenordown(){ var oDiv=document.getElementById('drop');var oH2=oDiv.getEleme

手機點選隱藏 div

$(document).bind("touchend", function(e){ var _con = $('#icon_menu'); //點選的元素 if(_

vue 列表單擊顯示當前列表內容隱藏其他的列表頁，多次點選實現顯示隱藏的功能

1.//class -- sel_div已經把樣式寫好了；通過控制sel_div來控制樣式的展示情況； 2.單擊時，重新給showQA賦值為index；showQA與下標相同時，顯示樣式；同一時間只有一個li滿足條件； 3.當第二次點選時，給一個狀態開關isSta

android開發時為日期控制元件設定選擇範圍，再次點選時顯示上次選擇日期

下面做的是：28天<= 日期 <=65週歲 //計算28天前的日期 public static final long _MAX_TIME = 28 * 24 * 60 * 60 * 1000L;int inComingYear;int inComingMonth;int

專案--點選按鈕顯示資料，點選空白處隱藏資料

點選空白處隱藏資料點選按鈕顯示資料在這裡插入程式碼片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

JS控制EasyUI外掛的隱藏和顯示

有一個功能，在JS中控制easyUI datebox的顯示和隱藏，控制元件如下。 <input id="test" class="easyui-datebox"> 用傳統的方法比如： $(

個人js學習例項-點選按鈕實現按鈕背景色變化以及相對應的div變化

效果：程式碼： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title>

Echarts實現點選節點顯示隱藏子節點

問題背景專案中一個根節點，根節點有七八個子節點，子節點有較多的孫子節點。不美觀，因此需要將孫子節點隱藏，當點選子節點時再去顯示此子節點對應的孫子節點，再次點選則隱藏孫子節點。問題解決 Echarts的li

用Jquery點選展開，出現隱藏的DIV,點選收起DIV又隱藏起來.

vue 點選展開顯示更多點選收起部分隱藏

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 &

Fileupload控制元件點選“瀏覽”按鈕，選擇圖片後需要立即顯示所選擇的圖片

function showimg(){ document.getElementById("<%=Image1.ClientID %>").src=document.getElementById("<%=File1.UniqueID %&

點選按鈕顯示隱藏內容

<li> <input type="radio" onclick="ydiaosai()"> <label >點選顯示</label> </li> <li> <input type="r

Js事件案例——點選生成隨機div

描述：滑鼠點選頁面，在哪裡點選就在那個位置建立一個div，寬高50，顏色隨機，div在滑鼠點選的正中間效果：實現： js： var Method=(function () { return { EVENT_ID:"event_id",

js控制div點選隱藏顯示

相關推薦