Question

191

Unable to get value of margin property from result getComputedStyle

rated 0 times [ 198] [ 7] / answers: 1 / hits: 39418 / 11 Years ago, sat, september 7, 2013, 12:00:00

The result of a getComputedStyle contains a property named margin, but the property is always an empty string () in Mozilla Firefox or Apple Safari; however, in Internet Explorer (and Google Chrome) the margin property contains the expected value (even in IE 6). The same result is returned when using the getPropertyValue(margin) method of the returned object.

How can I get the computed value of the margin in Firefox and Safari?

var el = document.body.appendChild(document.createElement('div'));

el.style.margin = '2px';

console.log(getComputedStyle(el, null).margin === ); // false in IE and Chrome

console.log(getComputedStyle(el, null).getPropertyValue(margin) === ); // same

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jazminuniquer

Add To Favorites

Follow

Total Points: 63

Total Questions: 121

Total Answers: 96

Location: Cambodia

Member since Thu, May 21, 2020

4 Years ago

jazminuniquer questions

1 Next.js change locale for the current path that has query, using router

Sat, Nov 20, 21, 00:00, 3 Years ago

1 Error: bundle initial-es5 exceeded maximum budget. Budget 6.00 MB was not met by 133.51 kB with a total of 6.13 MB

Thu, Feb 18, 21, 00:00, 3 Years ago

1 How to get values from client.users.fetch(id) in discord.js

Thu, Sep 3, 20, 00:00, 4 Years ago

1 Apply motion to react component Framer-Motion

Thu, Jun 25, 20, 00:00, 4 Years ago

1 Vuetify - How to select a row data using v-radio-group in v-data-table

Tue, May 19, 20, 00:00, 4 Years ago

View All

answered 11 Years ago ronaldodarioc · Accepted Answer

The getComputedStyle() function should not evaluate the values of shorthand properties (such as margin, padding), only longhand properties (such as margin-top, margin-bottom, padding-top). In the case of shorthand properties it should only return an empty string.

var el = document.body.appendChild(document.createElement('div'));

el.style.margin = '2px';

var computed = getComputedStyle(el);



var longhands = ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'];

longhands.forEach(function(e) { console.log(e + ': ' + computed.getPropertyValue(e)) });

In addition, you can take a look at this link for a cross-browser solution, which uses currentStyle for internet explorer