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

Closed
MrPrime opened this Issue Jan 9, 2012 · 12 comments

7 participants

@MrPrime

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

@ibolmo
MooTools member

Not necessarily. You could try using getComputedStyle, however.

@ibolmo ibolmo closed this Jan 30, 2012
@MrPrime
    #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

@MrPrime

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
@ibolmo
MooTools member
@MrPrime

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

@ibolmo
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
@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

@fakedarren
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
@kguelzau

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