Skip to content
This repository

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

Closed
MrPrime opened this Issue January 09, 2012 · 12 comments

7 participants

AndrewZhang Olmo Maldonado Darren Waddell pr3fect yohanleafheart Kai Gülzau robjb
AndrewZhang

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.

pr3fect

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

Olmo Maldonado
Owner

Not necessarily. You could try using getComputedStyle, however.

Olmo Maldonado ibolmo closed this January 29, 2012
AndrewZhang
    #demo {
            width: 8em;
            height: 7em;
            margin: 1em 0 0 2em;
            border: 0.1em solid #dcdcdc;
            background: #acacac;
        }
    <div id="demo">
    </div>
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;
        console.log($('demo').getStyle('margin-top'));

        // 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

AndrewZhang

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

pr3fect

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
Olmo Maldonado
Owner
AndrewZhang

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

Olmo Maldonado
Owner

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

Olmo Maldonado ibolmo reopened this January 31, 2012
yohanleafheart

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 http://jsfiddle.net/DBcVx/6/. 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

Darren Waddell
Collaborator

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

Darren Waddell fakedarren closed this July 28, 2012
Kai Gülzau

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

robjb

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
Something went wrong with that request. Please try again.