Questions tagged [getcomputedstyle]
98 questions
3
votes
1 answer
Failed to execute 'setProperty' on 'CSSStyleDeclaration': These styles are computed, and therefore the 'opacity' property is read-only
I am trying to set the property value of my pseudo element css class via javascript file.
The problem is that I am getting the error shown in the title.
Is there any other way to set it?
Code in css:
.list {
display: flex;
overflow-x: scroll…
Kathrine Hanson
- 575
- 2
- 10
- 32
3
votes
1 answer
How can I assert that a HTML element does not change its appearance after a stylesheet has been included?
Setting
I’m writing a plugin for a website. It is going to add elements to the DOM that are styled via the plugin’s CSS. I expect the styling to be limited to the plugin, i.e. no elements outside the plugin should change their appearance once the…
bleistift2
- 494
- 5
- 14
3
votes
1 answer
Why window.getComputedStyle() returns an object with a property name "backgroundColor" but using a property name "background-color" also works?
This is true at least in Chrome and Firefox:
Object.keys(getComputedStyle(document.body)).includes("backgroundColor") // => true
Object.keys(getComputedStyle(document.body)).includes("background-color") // =>…
nonopolarity
- 146,324
- 131
- 460
- 740
3
votes
2 answers
Get element's resolved height CSS property value; recognize 100%
The values returned by getComputedStyle are resolved values. These are usually the same as CSS 2.1’s computed values, but for some older properties like width, height, or padding, they are instead the same as used values.
-- MDN:…
myf
- 9,874
- 2
- 37
- 49
3
votes
0 answers
Why does .getComputedStyle() appear to be the only commonly used method to return the incorrect height of an element?
Question: Under certain circumstances .getComputedStyle() appears to return an incomplete/incorrect value for the height property of an element. Now I'm worried. Is it known to return unpredictable or incorrect values for other…
DR01D
- 1,325
- 15
- 32
3
votes
0 answers
Javascript wait for all element styles to be applied
I have a need to resolve (i.e. 'apply', not just load into memory) all styles for all elements of a HTML webpage with some javascript/jquery. The styles may be in-line within the element's style tag, in-line within the page's styles, or external…
TerrorBight
- 334
- 4
- 23
3
votes
3 answers
How to properly detect a change in computed style property with Angular 2?
I have created an Angular 2 app which contains a component whose HTML element I am trying to position relative to that of another component. In order to compute the exact coordinates, I need to know my own element's width and height as rendered by…
not2savvy
- 2,902
- 3
- 22
- 37
3
votes
1 answer
getComputedStyle failed to execute
I have this simple bit of code:
var recipes = document.getElementsByClassName("recipes");
var recipesStyle = window.getComputedStyle(recipes, null);
It returns this error message:
Uncaught TypeError: Failed to execute 'getComputedStyle' on…
peardrops
- 99
- 1
- 2
- 9
3
votes
0 answers
How to get the text content of a ::before pseudo-element?
In this example the ::before pseudo-element's content is not a static value, but a counter. I want to get the current value "2" instead of the general formula "counter(itemcounter)".
// Expected value is 2 instead of…
Tamás Bolvári
- 2,976
- 6
- 34
- 57
3
votes
1 answer
Are any events fired on Computed Style Change?
Is there an event I can listen for in JavaScript that tells me the computed style for a particular DOM element has changed?
If not, what is the least blocking way to get the computed style of a DOM element using JavaScript?
user1739757
3
votes
1 answer
How to apply document CSS properties to a Parsed element without appending it to the DOM
The common way to do it is to appending the new element to the body and then get the computed css values like in this jQuery script:
var $body = $('body');
var $this = $(this);
var $text = $this.text();
if($text=='') $text =…
user2200481
3
votes
1 answer
Will the CSSStyleDeclaration returned through getComputedStyle always have the same length for a given browser?
I'm looking to compare two Elements to find all differences in their computed styles. In order to do this, I'm iterating over all styles of A, and comparing them to B by doing the following:
var stylesA = window.getComputedStyle(a),
stylesB =…
Ian Clark
- 9,237
- 4
- 32
- 49
3
votes
2 answers
Firefox getComputedStyle returning none computed value
I'm calling getComputedStyle on an element that defines left, right and bottom.
In Chrome this returns 'auto' as the value for top but in Firefox this returns the pixel value, however if you look at the inspector in Firefox the top value doesn't…
DEfusion
- 5,533
- 5
- 44
- 60
3
votes
0 answers
GetBoundingClientRect doesn't work outside the window
I am making a script that should measure distances in a post. For example, if i have three posts:
Post 1: two lines of text, then the image that I want to see.
Post 2: Just the image that I want to see.
Post 3: The image I want to see Followed by…
Nicky Smits
- 2,980
- 4
- 20
- 27
3
votes
1 answer
javascript getComputedStyle, but not inherited ones (in chrome)
I want to get only the computed styles of the elements on a page, without all the inherited styles
var allElements = document.querySelectorAll( '*' );
for (var i=0;i
user2860553
- 81
- 4