2016-03-23 23 views
2

Ich versuche, die CSS-Eigenschaft Änderungen in einem Element zu erkennen. Ich suchte online und fand mutationobserver javascript api. aber in meinem Testskript funktioniert es nicht wie erwartet (es warnt nicht den Eigenschaftsnamen und den Eigenschaftswert).Javascript: mutationobserver ist keine Warnung Nachricht

var foo = document.getElementById("hideit"); 
 

 
var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
    alert('mutation.type = ' + mutation.type); 
 

 
    }); 
 

 
}); 
 
observer.observe(foo); 
 
observer.disconnect(); 
 

 
$(function() { 
 
    $("#clickhere").on("click", function() { 
 
    $("#hideit").slideToggle('fase'); 
 
    }); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="clickhere">click to toggel</div> 
 
    <div id="hideit" style="display:none;">this is the content of the hide/show toggle</div> 
 

 
</body>

und es zeigt einen Javascript-Fehler

TypeError: Argument 1 of MutationObserver.observe is not an object. 

Dank ist vorab

Antwort

2

Im moment gibt es zwei Probleme in Ihrem Code:

  1. Verwendung von observer.observe ist falsch. Es sollte 2 Params nehmen: Node und MutationObserverInit. Siehe die korrekte API here.
  2. Rufen Sie nicht observer.disconnect(); sofort nach observe. Disconnect hört auf zu beobachten.

Working example

4

Ihr Code ausgeführt wird, bevor das DOM tatsächlich geladen wird ... Aus diesem Grund sind Sie ein Null/undefinierten Wert der Methode observe vorbei.

Ihr Code innerhalb Wrap:

$(document).ready(function() { 
.... 
}) 

Auch Aufruf trennen Sie ihn vom Empfang jedes Ereignis verhindern. So sollten Sie disconnect nicht direkt nach dem Anruf observe anrufen. Und Sie verpassen einen Parameter für den observe Aufruf.

prüfen für ein Arbeits exemple:

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#Example_usage