How do I retrieve CSS property in Firefox and Opera exactly how it's written?

Question

I'm trying to develop a jQuery plugin that utilizes CSS values and modifies them. The problem, however, is that Firefox and Opera seem to not like keeping track of the units of the property's value. In Retrieving percentage CSS values (in firefox), the asker wants to get the percentage of a CSS property. I want to get the CSS property as a percentage with javascript if it's specified as a percentage in its CSS or as pixels if it's specified as pixels. I don't want to rely on any libraries other than jQuery, although it doesn't seem to be able to do what I'm wanting either.

CSS

#element{
    margin-left: 10%;
}

Javascript

$('#element').css('margin-left'); // returns 29px in Firefox, but 10% in Chrome
getComputedStyle(document.getElementById('element')).getPropertyValue('margin-left'); // returns 29px in Firefox, but 10% in Chrome

It does'nt really do that, you'll have to calulate the percentage by using the pixel value of the element, and the pixel value of the parent element, to get the percentage. — adeneo, May 06 '13 at 20:21
@Xotic750 Firefox and Opera doesn't use getMatchedCSSRules(element) so I have to use getComputedStyle(element). But that's not the problem. The problem is that the return values for the properties are different in different browsers. Firefox "throws away" the original value specified in CSS and (usually) converts it to pixels. — Andrew, May 06 '13 at 20:24
Do you want to grab width value from inline CSS or external stylesheet? or both? — Salman A, May 06 '13 at 20:42
@SalmanA Both. It needs to be retrieved from an unknown source. — Andrew, May 06 '13 at 20:43

score 1 · Answer 1 · answered May 06 '13 at 20:36

This example is using css width, but the principle can be applied to any attribute that may be specified in %

CSS

.oneThirds {
    width: 25%;
    background-color: red;
}
.half {
    width: 50%;
    background-color: green;
}
.twoThirds {
    width: 75%;
    background-color: yellow;
}

HTML

<div class="oneThirds">One third</div>
<div class="half">Half</div>
<div class="twoThirds">two thirds</div>

Javascript

var elements = document.getElementsByTagName("div");

Array.prototype.forEach.call(elements, function (element) {
    var parentStyle = window.getComputedStyle(element.parentNode);
    var elementStyle = window.getComputedStyle(element);
    var widthPercent = (parseFloat(elementStyle.width) / parseFloat(parentStyle.width)) * 100;

    console.log(widthPercent);
});

Output

25
50
75

On jsfiddle

On some browsers you may need to do a little rounding of the floating point.

Sorry, but this isn't what I'm looking for. I'm not trying to convert everything into percentages. What I'm trying to do is get the native CSS rule. e.g. it's specified as 20% in CSS and will give you a return value of 20%. If it's specified as 20px, then it will return 20px. — Andrew, May 06 '13 at 20:40
Then I guess you need to make that 100% clear in your question. — Xotic750, May 06 '13 at 20:42

How do I retrieve CSS property in Firefox and Opera exactly how it's written?

1 Answers1