I have a table where each cell background is populated by sprites from a sprite sheet when the user clicks the cell which applies a class.
#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;
}
Now I am using html5 canvas to make a download image. How can I get the background-position of the cells? I tried(and failed)
let x = document.querySelector('.material_58').style.backgroundPosition;
console.log(x); // returned nothing/blank
And also to no avail:
let tmp = window.getComputedStyle(x,null).backgroundPosition.trim().split(/\s+/);
I assume they may be getting the background position of the actual element, not the position of the sprite sheet. I'm trying to get
background-position: -192px -48px;
If something like that doesn't work maybe something like get the actual class description and parse it? Thank you for your help.
The issue with your approach is that you're referencing a nonexistent style attribute on the element. What you want is the computed style:
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>It would work the way you have it if the background position were inline:
console.log(
document.querySelector('.inline-style')
.style
.backgroundPosition
);<div class="inline-style" style="background-position: -192px -48px"></div>