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

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

Comments

Projects
None yet
7 participants
@MrPrime

MrPrime commented Jan 9, 2012

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

This comment has been minimized.

Show comment
Hide comment
@pr3fect

pr3fect Jan 23, 2012

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

pr3fect commented Jan 23, 2012

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

@ibolmo

This comment has been minimized.

Show comment
Hide comment
@ibolmo

ibolmo Jan 30, 2012

Member

Not necessarily. You could try using getComputedStyle, however.

Member

ibolmo commented Jan 30, 2012

Not necessarily. You could try using getComputedStyle, however.

@ibolmo ibolmo closed this Jan 30, 2012

@MrPrime

This comment has been minimized.

Show comment
Hide comment
@MrPrime

MrPrime Jan 30, 2012

    #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 commented Jan 30, 2012

    #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

This comment has been minimized.

Show comment
Hide comment
@MrPrime

MrPrime Jan 30, 2012

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

MrPrime commented Jan 30, 2012

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

@pr3fect

This comment has been minimized.

Show comment
Hide comment
@pr3fect

pr3fect Jan 30, 2012

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

pr3fect commented Jan 30, 2012

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

This comment has been minimized.

Show comment
Hide comment
@ibolmo

ibolmo Jan 30, 2012

Member

I wouldn't mind it if there were helpers for the unit conversion that'd be
interesting. Expecting, however, that getStyle would return px values all
the time.. I'm not in favor.

I am in favor, though, of a cross-browser return of the same value. Say I
defined the property as 3pt then I expect getStyle to return 3pt across
all browsers. Is this the problem you're seeing?

On Mon, Jan 30, 2012 at 4:07 AM, pr3fect <
reply@reply.github.com

wrote:

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

Reply to this email directly or view it on GitHub:
#2196 (comment)

Member

ibolmo commented Jan 30, 2012

I wouldn't mind it if there were helpers for the unit conversion that'd be
interesting. Expecting, however, that getStyle would return px values all
the time.. I'm not in favor.

I am in favor, though, of a cross-browser return of the same value. Say I
defined the property as 3pt then I expect getStyle to return 3pt across
all browsers. Is this the problem you're seeing?

On Mon, Jan 30, 2012 at 4:07 AM, pr3fect <
reply@reply.github.com

wrote:

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

Reply to this email directly or view it on GitHub:
#2196 (comment)

@MrPrime

This comment has been minimized.

Show comment
Hide comment
@MrPrime

MrPrime Jan 31, 2012

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

MrPrime commented Jan 31, 2012

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

@ibolmo

This comment has been minimized.

Show comment
Hide comment
@ibolmo

ibolmo Jan 31, 2012

Member

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

Member

ibolmo commented Jan 31, 2012

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

This comment has been minimized.

Show comment
Hide comment
@yohanleafheart

yohanleafheart Feb 24, 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 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

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

This comment has been minimized.

Show comment
Hide comment
@fakedarren

fakedarren Jul 28, 2012

Member

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

Member

fakedarren commented Jul 28, 2012

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

This comment has been minimized.

Show comment
Hide comment
@kguelzau

kguelzau Aug 6, 2012

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

kguelzau commented Aug 6, 2012

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

@robjb

This comment has been minimized.

Show comment
Hide comment
@robjb

robjb Feb 18, 2013

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.

robjb commented Feb 18, 2013

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