Window.getComputedStyle ne fonctionne pas pour les propriétés abrégées dans d'autres navigateurs, sauf Chrome

Window.getComputedStyle donne la valeur du style dans Chrome, mais dans Firefox et Microsoft Edge, il donne une chaîne vide et dans Internet Explorer, il dit qu'il ne prend pas en charge cette méthode. Voici mon code.

Chaque fois que l'image Upvote est cliquée, elle déclenche la fonction upDownVote() , en passant deux arguments. C'est le HTML.

  <div id="upvote" title="Click to UpVote" onClick="upDownVote('increment',<?php echo $id; ?>);"></div> <div id="downvote" title="Click to DownVote" onClick="upDownVote('decrement',<?php echo $id; ?>);"></div> 

J'ai transmis trois variables à mon script php via ajax; Id, type, applicable . Type peut stocker une valeur, soit incrémenter ou décrémenter.

Je voulais, même le bouton upvote est cliqué. La valeur de crédit augmente de 1 et l'arrière-plan du bouton est modifié. Même pour le bouton downvote, mais ici, il y a une baisse de la valeur du vote. Je gère cela avec la variable de type .

• Variable dans javascript statement
• CSS3 Transition Polyfill
• <Marquee> utilisation / remplacement de l'étiquette html
• Comment défiler en diagonale avec jQuery ou Javascript
• Rendre les numéros de lignes noncopables

Lorsque Upvote est cliqué à nouveau (ou double-cliqué par l'utilisateur), il doit y avoir diminution de la valeur du vote et non augmentation. J'ai manipulé ceci avec une condition if imbriquée dans la condition if (lorsque le type est incrémenté). Dans cette condition, j'ai vérifié si applicable est supérieur à un. Si c'est le cas, j'ai changé le type pour décrémenter et applicable à 0, aussi l'arrière-plan de son image originale.

Mais que faire si lorsque l'utilisateur a cliqué sur le bouton upvote après avoir cliqué sur le bouton downvote. Dans cette condition, applicable valeur applicable est supérieure à 1. Et ensuite, il faut changer le type pour décrémenter. Cela ne devrait pas se produire. Pour cela Dans mon état imbriqué si, j'ajoute vérifier l'arrière-plan du bouton downvote également. Il doit être identique à celui de la page précédente.

Lorsque la valeur applicable est supérieure à 1 (lorsque l'utilisateur a cliqué sur upvote avant de cliquer sur le downvote). Dans mon script php, j'ajoute la valeur du vote par deux.

La même logique pour le bouton downvote.

Et voici le JavaScript.

 var applicable = 0; // determine applicable to vote or not. var upvote = document.getElementById("upvote"); var downvote = document.getElementById("downvote"); var upvoteBlack = window.getComputedStyle(upvote).getPropertyValue("background"); var downvoteBlack = window.getComputedStyle(downvote).getPropertyValue("background"); function upDownVote(x, id) { debugger; var type = x; // determine the type(increment or decrement). if (type === "increment") { upvote.style.background = "url(img/image-sprite-1.jpg) 0px -40px"; applicable++; // increment in the applicable. if (applicable > 1 && window.getComputedStyle(downvote).getPropertyValue("background") === downvoteBlack) { type = "decrement"; applicable = 0; upvote.style.background = "url(img/image-sprite-1.jpg) 0px 0px"; } downvote.style.background = "url(img/image-sprite-1.jpg) -40px 0px"; } else { downvote.style.background = "url(img/image-sprite-1.jpg) -40px -40px"; applicable++; if(applicable > 1 && window.getComputedStyle(upvote).getPropertyValue("background") === upvoteBlack) { type = "increment"; applicable = 0; downvote.style.background = "url(img/image-sprite-1.jpg) -40px 0px"; } upvote.style.background = "url(img/image-sprite-1.jpg) 0px 0px"; } // Ajax started here. } 

CSS de upvote et upvote .

 div#upvote { width: 40px; height: 40px; background: url(../img/image-sprite-1.jpg); background-position: 0px 0px; margin: 0px auto; margin-top: 10px; cursor: pointer; } div#downvote { width: 40px; height: 40px; background: url(../img/image-sprite-1.jpg) -40px 0px; background-position: -40px 0px; margin: 0px auto; cursor: pointer; } 

Tout fonctionne bien mais maintenant je suis bloqué. Comment obtenir la valeur de fond des boutons comme window.getComputedStyle ne fonctionne pas bien tous les navigateurs. Je veux savoir s'il y a une autre propriété par laquelle je peux avoir la propriété de fond.

De plus, je veux savoir comment faire la même chose avec une logique différente. Si je ne peux pas avoir la solution pour window.getComputedStyle .

• Défilement vertical multi-colonne dans CSS / JavaScript
• Effet de réflexion d'image utilisant un CSS pur
• Animer les positions de gradient CSS3 en utilisant jQuery
• Créez un marqueur avec un remplissage gradient au lieu de la couleur normale – Google Maps
• Comment appliquer la virtualisation des lignes pour une table / liste dans HTML / CSS / JS?