it's better for getStyle method always returns style value with px unit #2196

MrPrime opened this Issue Jan 9, 2012 · 12 comments

7 participants


just as the issue title, I think it's better that no matter what unit of a style property uses for an element, getStyle method can always return style value with 'px' unit. that will be very helpful, I guess.


I guess that might break tons of scripts where ppl use Element.getStyle('width') or similar instead of Element.Dimensions

MooTools member

Not necessarily. You could try using getComputedStyle, however.

@ibolmo ibolmo closed this Jan 30, 2012
    #demo {
            width: 8em;
            height: 7em;
            margin: 1em 0 0 2em;
            border: 0.1em solid #dcdcdc;
            background: #acacac;
    <div id="demo">
function getStyle(el, prop) {
            var rt = null;
            if(window.getComputedStyle) {
                rt = window.getComputedStyle(el, null).getPropertyValue(prop);
            } else {
                var camelProp = prop.replace(/-\D/g, function(match){
                    return match.charAt(1).toUpperCase();
                rt = el.currentStyle[camelProp];
            return rt;

        // use pure javascript
        // in IE6,7,8 it return 1em, in IE9 and other standard browsers return 13px;
        console.log(getStyle($('#demo')[0], 'margin-top'));

        // use mootools getStyle mothed
        // in IE6,7,8 it return 1em, in IE9 and other standard browsers return 13px;

        // use jquery css method
        // jquery do the unit conversion in all browsers under the hook
        console.log($('#demo').css('margin-top'));  // 13px

so, I think the demo can make the issue clear


I hope mootools can help developer do the conversion, that will be quite useful for calculating element's dimension


Good example @MrPrime but would you always want a "px" suffix on the returned value? That could make further calculations a bit bloated as you always need to run it through parseInt to get an integer value.
For example think of that you want to sum up margin-top and margin-bottom:

$('demo').css('margin-top') + $('demo').css('margin-bottom') // '13px0px'
parseInt($('demo').css('margin-top'), 10) + parseInt($('demo').css('margin-bottom'), 10) // 13
MooTools member

actually, what I want is to make old IE versions(6, 7, 8) return the same value just as other standard browsers do

MooTools member

Ok I'll reopen under the assumption that we'll have to add test coverage verify that oldIE is returning odd values.

@ibolmo ibolmo reopened this Jan 31, 2012

Currently getStyle() also does not return the right values for font-size in Opera, IE9 or lower if you set it to be relative. I made a jsfiddle as an example I agree with @MrPrime that we might want to use the jQuery approach in here, which I added to that jsfiddle as getPixelSize. I think we should add a check at the end of getStyle that if the browser is Opera and the property font-size, or IE and the return value is not a pixel, it gets converted to a pixel. I think all of the major browsers convert to a px unless it is an inline style

MooTools member

getComputedStyle should always return a px value, we can't change this or we would affect backwards compatibility.

@fakedarren fakedarren closed this Jul 28, 2012

see #2328
getComputedStyle and getStyle do not always return px.


Using mootools-core-1.4.5-full-nocompat, I'm seeing percentage results from $('someElementId').getComputedStyle('width') in IE9. Behavior is as expected (px only) in Chrome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment