Questions tagged [getcomputedstyle]
80 questions
1
vote
1 answer
Is color format specified in the spec for getComputedStyle?
I'm parsing a color string returned by getComputedStyle to get R, G, B, and A values from it.
So far (in Chrome and Firefox), color values always seem to come back in rgb or rgba format which is easy to parse:
const [, r, g, b, a] =…
Sandy Gifford
- 5,112
- 2
- 26
- 53
1
vote
1 answer
if statement in JavaScript game not working as desired to allow for collision detection
I'm working through some basic steps in an HTML, CSS and JScript game to get very simple collision detection working between a CHARACTER and an ENEMY.
I am looking for something that is simple enough to explain to children of age 8 - 11.
If the…
Compoot
- 1,684
- 3
- 21
- 44
1
vote
1 answer
unable to access styles with getComputedStyle in connectedCallback of webcomponent
I am fairly new to javascript and been playing around with web-components. I wanted to access the CSS color attribute of an element inside the shadow DOM of a web-component. When I use the getComputedStyle() method I am unable to access the style…
Merlin11
- 35
- 4
1
vote
0 answers
Is it possible to "getComputedStyle" of an element that is not in the browser DOM?
I have not been able to find information about whether it is possible to getComputedStyle of an element that is not in the browser DOM.
My testing suggests that elements not inserted in the browser DOM do not get a computed style.
var el =…
user1283776
- 12,822
- 32
- 103
- 190
1
vote
0 answers
Retrieving CSS generated content
Is it possible to refer to generated content in a HTML document with JavaScript?
For example, I have a figure in the document
body {
counter-reset: figures 0;
}
figcaption::before {
counter-increment: figures;
content: "Figure "…
Mr Lister
- 42,557
- 14
- 95
- 136
1
vote
2 answers
How to get border-width using ComputedStyle in Javascript?
The following command
window.getComputedStyle(box).getPropertyValue("border")
is returning
"0.994318px solid rgb(255, 0, 0)"
How do I get border-width using ComputerStyle? Is there a way to replace the "border" argument by other one so it…
BlueSkies
- 107
- 5
1
vote
1 answer
Lookup HTML fragments with known CSS properties
I'm looking for some kind of "reverse CSS selectors": Given a HTML document how is it possible to look up fragments that have a specific formatting? For instance I would like to get a list of segments that use bold text (font-weight: bold;). Given…
Jakob
- 3,268
- 2
- 30
- 45
1
vote
2 answers
getComputedStyle() consistency across browsers
I need to get a computed CSS position for an element, but when using auto instead of a number value I get inconsistent results across browsers.
For example, in the demo below when setting bottom: auto;
Chrome and Firefox reports auto, but Edge…
CBarr
- 21,475
- 18
- 85
- 119
1
vote
0 answers
How to immediately update computed styles when a new media rule is applied?
I'm working on a dynamic responsive ad which has various media rules to account for different possible ad sizes. Depending on the size of the page, different content will show.
I've set up some JS conditions which will apply different styles when…
Emma
- 35
- 6
1
vote
3 answers
getComputedStyle('background-color') returns transparent, does not inherit ancestor's
getComputedStyle is supposed to return the final computed CSS property value. But for background-color, all browsers return transparent (or rgba(x,x,x,0)) instead of computing in inherited value from ancestors.
The only time the method works is if…
Jakub Fojtik
- 567
- 3
- 17
1
vote
0 answers
How to get computed style change for an element
I want to listen for element style changes (in particular in the case of :hover and/or insertRule). I can calculate the actual style with getComputedStyle and clone it into another object and then make diff every mouseenter/mouseleave (or…
Ximik
- 2,205
- 3
- 24
- 46
1
vote
1 answer
Changing background image through window.getComputedStyle
I'm trying to write a function which cycles background-image from 3 different options by button-click, and the code is not working. Maybe someone can tell why...
function changeBackground (){
console.log('change background');
var b =…
Tatjana
- 37
- 6
1
vote
2 answers
getPropertyValue("backgroundColor") returns an empty string
This is my problem:
var mycss = window.getComputedStyle(myelement);
returns a CSSStyleDeclaration object:
CSSStyleDeclaration {0: "animation-delay",..., backgroundColor: "rgb(0, 0, 0)",...}
Then, I want to get the background color,…
devpelux
- 2,342
- 3
- 14
- 30
1
vote
1 answer
Trying to getComputedStyle from parent element/Component in React
I need to get computed background color a parent element to pass to an Image component. This is needed as I'm using the Contentful API to render images on the fly, and I have to supply a bg color query param.
Currently this isn't working:
import…
two7s_clash
- 5,527
- 1
- 25
- 44
1
vote
1 answer
CSS: the sum of the children's width is greater than the parent's width (inline-flex)
Trying to set an horizontal scroll (using inline-flex) in I encountered the following problem :
Can't get a padding around a scrolling div. Trying to understand why, it appears that the simple addition of the widths of the children gives a number…
Joseph Merdrignac
- 2,212
- 2
- 16
- 16