事件偵聽器通過JavaScript的一個div改變屬性

我的div如下所示：事件偵聽器通過JavaScript的一個div改變屬性

<div id="modal" 
    style="position: fixed; 
     left: 0px; 
     top: 0px; 
     width: 100%; 
     height: 100%; 
     opacity: 0.4; 
     background-color: rgb(204, 204, 204); 
     display: block; 
     z-index: 99;"> 
</div>

我想事情發生時，我的div變化（注：顯示塊已更改爲無）：

<div id="modal" 
    style="position: fixed; 
     left: 0px; 
     top: 0px; 
     width: 100%; 
     height: 100%; 
     opacity: 0.4; 
     background-color: rgb(204, 204, 204); 
     display: none; 
     z-index: 99;"> 
</div>

我在想一個事件監聽，沒有任何人有任何想法如何得到這個工作？

來源

2016-12-20 Markie Doe

哪裏是你的javascript代碼？ – madalinivascu

我沒有工作代碼，我不解帶的股利，但我沒有得到它的工作，所以我想知道是否有任何人有一個想法關於我應該在哪裏尋找 –

div的css如何改變？通過一些腳本？ – anu

你可以使用一個MutationObserver

喜歡的東西

var target = document.getElementById('modal'); 

var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    if (mutation.attributeName === 'style') { 
     ... 
    } 
    });  
});

來源

2016-12-20 09:53:36

你可以聽出了雙擊，然後執行：

一個函數來更改CSS;和
另一個功能無論是應該發生的CSS 改變

實例後：

var records = document.getElementsByClassName('record'); 

function changeCSS() { 

    [... CODE HERE...] 

} 

function doSomethingElse() { 

    [... CODE HERE...] 

} 

for (var i = 0; i < records.length; i++) { 
    var record = records[i]; 
    record.addEventListener('dblclick', function(){changeCSS(); doSomethingElse();}, false); 
}

來源

2016-12-20 09:57:41 Rounin

添加下面的腳本代碼。您必須使用設置間隔或超時功能來將div顯示爲無。

下面我使用了setTimeout（）函數，所以在2秒後'display：none'style get應用於div。

$(document).ready(function(){   
      setTimeout(function() { 
       $('#modal').css('display','none'); 
      }, 2000); 

     });

來源

2016-12-20 09:58:28 Pooja

如果已經有一個雙擊事件，當用戶點擊該表發生的事情，你可以聽與.dblclick(function()

例如該事件：

腳本：

$(document).ready(function(){ 
     $("#modal").dblclick(function(){ 
      $(this).toggleClass('newClass'); 
     }); 
    });

CSS：

.newClass 
{ 
    width:100%, 
    height:100%, 
    background-color: rgb(204, 204, 204); 
    ... 
    ... 
}

來源

2016-12-20 10:47:32 Rhaebosis

如果要在顯示器顯示和隱藏之間切換，請取消註釋已註釋的標記。另外，還要「$（ '格＃模式'）上（ '點擊'，函數（）{」和「$（ '格＃模式'）隱藏（）;」作爲註釋

$('div#modal').show(); 
 
    // $('button').on('click',function(){ 
 
    $('div#modal').on('click', function() { 
 
    //$(this).css("display","none"); 
 
    //event.stopPropagation(); 
 
    //$('div#modal').toggle(); 
 
    $('div#modal').hide(); 
 
    })

<div id="modal" style="position: fixed; 
 
      left: 0px; 
 
      /*top: 50px;*/ 
 
      top:0px; 
 
      width: 100%; 
 
      height: 100%; 
 
      opacity: 0.4; 
 
      background-color: rgb(204, 204, 204); 
 
      z-index: 99;"> 
 
</div> 
 
<br> 
 
<!--<button>Click</button>--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

好運！

來源

2016-12-20 10:55:35 Pawan

事件偵聽器通過JavaScript的一個div改變屬性

回答

相關問題