Tengo una tabla donde el fondo de cada celda se rellena con sprites de una hoja de sprites cuando el usuario hace clic en la celda que aplica una clase.
#design_container td { border: solid 1px #333; border-width: 0 1px 1px 0; width: 15px; height: 15px; background-image: url("../img/material_sprite.png"); background-repeat: no-repeat; } .material_58 { background-position: -192px -48px; }Ahora estoy usando lienzo html5 para hacer una imagen de descarga. ¿Cómo puedo obtener la posición de fondo de las celdas? Lo intenté (y fallé)
let x = document.querySelector('.material_58').style.backgroundPosition; console.log(x); // returned nothing/blankY también en vano:
let tmp = window.getComputedStyle(x,null).backgroundPosition.trim().split(/\s+/);Supongo que pueden estar obteniendo la posición de fondo del elemento real, no la posición de la hoja de sprites. estoy tratando de conseguir
background-position: -192px -48px;Si algo así no funciona, ¿tal vez algo como obtener la descripción de la clase real y analizarla? Gracias por tu ayuda.
El problema con su enfoque es que está haciendo referencia a un atributo de style inexistente en el elemento. Lo que quieres es el estilo computado :
const element = document.querySelector('.material_58'); const bgpos = getComputedStyle(element).backgroundPosition; console.log(bgpos); .material_58 { background-position: -192px -48px; } <div class="material_58"></div>Funcionaría de la forma en que lo tiene si la posición de fondo estuviera en línea:
console.log( document.querySelector('.inline-style') .style .backgroundPosition ); <div class="inline-style" style="background-position: -192px -48px"></div>