style - get background color javascript

window.getComputedStyle no funciona para las propiedades abreviadas de otros navegadores, excepto Chrome

Question

window.getComputedStyle da el valor del estilo en Chrome, pero en Firefox y Microsoft Edge da una cadena vacía y en Internet Explorer, dice que no es compatible con ese método. Aquí está mi código.

Siempre que se haga clic en la imagen de Voto ascendente, se dispara la función upDownVote() , pasando dos argumentos. Este es el 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>

Pasé tres variables a mi script php a través de ajax; Id, tipo, aplicable . Tipo puede almacenar un valor, ya sea incremento o decremento.

Yo quería, incluso se hace clic en el botón de reenvío. El valor del voto aumenta en 1 y se cambia el fondo del botón. Lo mismo para el voto a la baja del botón, pero aquí hay una disminución en el valor del voto. Manejo esto con la variable type .

Cuando se hace clic de nuevo en la votación alternativa (o en que el usuario hace doble clic), debe haber una disminución en el valor del voto, no en el incremento. Manejé esto con una condición if anidada dentro de la condición if (cuando el tipo es incrementado). En esa condición, verifiqué si applicable más de uno. Si lo es, cambié el type a decremento y aplicable a 0, también el fondo de su imagen original.

Pero, ¿qué pasaría si el usuario hace clic en el botón de reenvío luego de hacer clic en el botón de declive? En esa condición, el valor applicable es más de 1. Y luego debe cambiar el type para disminuir. Eso no debería suceder. para esto En mi condición anidada si añado, compruebo también el fondo del botón downvote. Debe ser el mismo que antes cuando carga la página.

cuando el valor aplicable es más de 1 (cuando el usuario hace clic en el voto adelantado antes de hacer clic en el voto a la baja). En mi script php, aumento el valor del voto en dos.

La misma lógica para el botón downvote.

y aquí está el 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 y downvote .

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;
}

Todo funciona bien, pero ahora estoy atascado. Cómo obtener el valor de fondo de los botones como window.getComputedStyle no funciona bien en todos los navegadores. Quiero saber si hay alguna otra propiedad con la que pueda tener la propiedad de fondo.

Además, quiero saber cómo puedo hacer lo mismo con lógica diferente. Si no puedo tener la solución para window.getComputedStyle .

Answer 1

El problema de la propiedad abreviada

background es una propiedad abreviada, una combinación de propiedades relacionadas con el fondo. Cuando configura un fondo de pink , en realidad está configurando varias propiedades de fondo, de las cuales una solo es backgroundColor . Por ejemplo, probablemente esté haciendo el equivalente de rgb(255, 165, 0) none repeat scroll 0% 0% / auto padding-box border-box .

getComputedStyle no devolverá el valor de las propiedades abreviadas, excepto en Chrome, como descubriste.

Para obtener el estilo calculado, busque el valor de las propiedades primitivas, como backgroundColor , y no el de las propiedades abreviadas, como el background .

¿Un enfoque diferente?

Sin embargo, esta no es realmente la forma en que quieres hacer las cosas. En lugar de establecer estilos en sus elementos directamente, encontrará que su código será mucho más limpio si agrega y elimina clases de sus elementos, y luego define las reglas para las clases. Como has encontrado, establecer estilos directamente en los elementos puede requerir que regreses y consultes el estilo, mientras que con las clases, puedes consultar fácilmente la clase existente con elt.classList.has() o alternar con .toggle() , o agregar, o eliminar.

Más sobre getComputedStyle

getComputedStyle es una API bastante especializada que solo debería ser necesaria en situaciones especiales.

Para obtener más información sobre el tema de getComputedStyle y las propiedades abreviadas, consulte esta pregunta . Se informó un error contra FF y puedes encontrarlo aquí .

Vea esta página de MDN . Dice que CSSStyleDeclaration (que es lo que devuelve getComputedStyle ) tiene un método getPropertyCSSValue que

devuelve ... null para las propiedades abreviadas .