Questions tagged [getcomputedstyle]
98 questions
1
vote
1 answer
What does `getComputedStyle` return and how to iterate over it?
Looking to get all the styles of a specific element via JavaScript. getComputedStyle works fine, however I'm confused what type of object it returns and how to best iterate over it. While some other answers have suggested iterating it over an array…
Afs35mm
- 549
- 2
- 8
- 21
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
- 5
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
- 45,515
- 15
- 108
- 150
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,570
- 3
- 36
- 49
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…
Chris Barr
- 29,851
- 23
- 95
- 135
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
- 681
- 5
- 22
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,435
- 3
- 27
- 53
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 =…
Liza
- 37
- 1
- 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,492
- 3
- 18
- 38
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,755
- 1
- 27
- 44
1
vote
1 answer
Why is the sum of the children's width greater than the parent's width?
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
- 3,510
- 2
- 19
- 16
1
vote
1 answer
js how can I get the source css rule in getComputedStyle rule
as we know that with window.getComputedStyle() method we can get the computed styles of specific element. (see https://jsfiddle.net/r7sgpyt5/1/).
My question is,how can we know where the CSSStyleDeclaration in the computed style come from.for…
Tsingbo
- 13
- 2
1
vote
0 answers
JavaScript mouseover/mousemove cusor postion without clicking in input text box
I'm attempting to combine a JavaScript mechanism for auto placing the users cursor inside of an input box through the mouseover and mousemove listeners.
I have an almost perfect working example here: http://codepen.io/anon/pen/doxNLm?editors=101
…
Null
- 123
- 7
1
vote
2 answers
Retrieve Custom CSS Property Value with JavaScript - Must not be possible
The goal is to define a custom CSS property value in an external style sheet.
Fiddle It
External CSS:
#myDiv {
--myCustomProperty: 'myCustomValue';
}
Markup:
There is nothing in the CSS spec that says…
JavaScript_is_4_Real_men
- 299
- 3
- 14