CODEWITHSUNDEEP
javascript
user578895
user578895

Reputation:

Firefox obj.style.hasOwnProperty

Just trying to figure out how to do basic feature detection in FF...

var    obj = $( '<div style="position:relative;top:10px;"></div>' )
  , hasTop = ({}).hasOwnProperty.apply( obj[0].style, [ 'top' ] );

// chrome hasTop === true
//     FF hasTop === false
//     IE hasTop === true

Or, if it's easier, I'm specifically trying to detect MozTransform support.

Upvotes: 1

Views: 443

Answers (3)

Eric Hodonsky
Eric Hodonsky

Reputation: 5897

Use modernizer instead..... http://www.modernizr.com/

http://odetocode.com/Blogs/scott/archive/2011/10/09/modernizr-js-feature-detection.aspx

or this I just found:

<script type="text/javascript">
    var s = document.body.style;
    // test for the presence of CSS3 transform properties
    if (s.transform !== undefined ||
        s.WebkitTransform !== undefined ||
        s.MozTransform !== undefined ||
        s.OTransform !== undefined) {
      // do stuff for TRUE
    }
</script>

Upvotes: 0

Roderick Obrist
Roderick Obrist

Reputation: 3828

Use typeof:

function isSupported (propName) {
 return typeof document.body.style[propName] !== 'undefined';
}

if (isSupported('top')) {alert('got ya'); }

Upvotes: 1

user578895
user578895

Reputation:

changed to:

!!$('<div style="-moz-transform:translateX(10px)"></div>')[0].style['MozTransform']

which works fine. Willing to see better answers and still curious why my original code doesn't work.

Upvotes: 0

Related Questions