6
votes

Événement JavaScript sur le style CSS change du bloc à aucun

Y a-t-il un événement pure JavaScript (no jQuery) qui est tiré lorsque je modifie le style CSS de mon div à partir de bloquer à Aucun . J'étais sous l'impression que je peux attraper cela via " onblur " mais on dirait que je ne peux pas!

Veuillez conseiller!


5 commentaires

onblur est pour quand un élément perd la mise au point


Ouais..la la différence de la dure. Y a-t-il un autre événement standard que je puisse utiliser pour mon cas?


Votre changement de div avec JavaScript juste?


@DODOWVOTER Bien qu'il n'y ait aucun code attaché à cette question, il est sur le sujet et utile. Le OP souhaite savoir si le DOM incendie un événement lorsqu'une action spécifique se produit. Quelque chose comme ça peut être difficile à suivre via Google. Et la réponse donnée par Joseph est en fait très utile et pourrait être utile à beaucoup de gens.


Si vous avez du mal avec un script externe comme moi - E.G. Cacher un formulaire d'abonnement => La laid de manière laid est de se fixer avec un délai bref pour vérifier quand il se cache et se clarifier quand il le fait.


4 Réponses :


5
votes

Il n'y a pas d'événements DOM déclenchés pour des changements de visibilité.

Le meilleur que vous puissiez faire est toujours d'utiliser la même fonction pour ajuster la visibilité du bloc au lieu de changer de style à chaque fois.

Ancien modèle: xxx

nouveau motif: xxx


1 commentaires

+1 Pour répondre à la question, aucun événement Dom ne se produit et pour souligner un meilleur moyen de structurer son JavaScript. Et pour ne pas le faire dans jQuery ...



2
votes

Vous pouvez utiliser JavaScript pour écouter un événement DOM pour une transition CSS3 (avec une tension minimale):


4 commentaires

Et s'il a besoin de soutenir les navigateurs plus âgés la toux, c'est-à-dire ?


Laissez les arguments msie mourir déjà. ChromeFrame fonctionne bien (et est moins gênante que Flash) et MSIE 10 a en réalité une prise en charge minimale "HTML5" (alerte d'utilisation Bad Buzzword), y compris CSS3. développeur.mozilla.org/en-us/docs/css/TUCTORIALS/ ... disant que vous ne pouvez pas faire quelque chose parce que vous voulez soutenir MSIE est superposé. Vous pouvez faire avancer les choses, même avec MSIE dans le chemin.


Je suis désolé que ce soit une vue horrible. Beaucoup de gens (y compris tout le monde dans mon bureau qui n'est pas un développeur!) Sont obligés d'utiliser IE au travail, n'ont pas accès aux droits de l'administrateur et ne peuvent pas installer ChromeFrame. L'OP a également demandé une réponse JavaScript et une très bonne chose a été fournie. Enfin, personne n'a dit que vous ne pouvez pas faire quelque chose à cause de MSIE. Vous pouvez faire ce que l'OP ne veut tout simplement pas comme votre réponse suggérée.


L'OP n'a rien dit sur IE. Je ne pense pas que vous ayez besoin de droits d'administration pour installer Chrome ou ChromeFrame (peut être installé sur un compte d'utilisateur plutôt que sur le système). Si le site Web était-ce important pour la productivité de l'Office, les personnes informatiques l'installeraient (ne pas dire que ce type de dictature fait pour un environnement de travail productif - je ne crois pas que ce soit). Et j'ai donné une réponse javascript - écoutez des événements DOM. Ou est-ce une réponse DOM? Il a posé des questions sur l'affichage: Bloquer et afficher: Aucun. Est-ce que cela fait une question CSS?



1
votes

Je pense que le plus proche de ce que vous recherchez serait le Domattrmodified code> événement . Je ne suis pas tout à fait sûr de son utilisation, mais c'est dans le sens de:

element.addEventListener('DOMAttrModified', function (e) {
  ...
});


0 commentaires

4
votes

APPORTURE, la nouvelle "API d'intersection Observatrice" est ce que vous recherchez. Il fonctionne actuellement dans le dernier chrome, Firefox et Edge. Voir https://developer.mozilla.org/en-us/ddocs / Web / API / intersection_observante_api Pour plus d'informations.

Exemple de code simple pour l'observation de l'affichage: Aucun commutation: P>

// Start observing visbility of element. On change, the
//   the callback is called with Boolean visibility as
//   argument:

respondToVisibility(element, callback) {
  var options = {
    root: document.documentElement
  }

  var observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      callback(entry.intersectionRatio > 0);
    });
  }, options);

  observer.observe(element);
}

respondToVisibility(myElement, isVisible => {
  if (isVisible) {
    doSomething();
  }
});


0 commentaires