事件侦听器通过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改变属性

回答

相关问题