Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Setting style attributes dynamically and consistently between Chrome & FF

Setting style attributes dynamically and consistently between Chrome & FF

Problem

Check out http://jsfiddle.net/HW64y/

.frustratingBox{
    border:5px solid;
    border-color: #000000;
    border-radius:25px;
    width:100px;
    height:100px;
}

The key line is an attempt to change a single Style property in the JS:

var FB = document.getElementById('box');
FB.style['border-color'] = "#009900";

Problem: my box ends up green like I would expect in Chrome, but remains black per the stylesheet rule in FF. What causes this difference, what exactly are these browsers doing differently with their style objects? Using Zepto gives a slick and easy fix, but I'd like to properly understand what's happening here.

Problem courtesy of: Bill Mills

Solution

The style property names are camel-cased in JavaScript, so:

FB.style.borderColor = "#009900";

The DOM 2 specification includes a list of valid style properties, all following the camel-cased naming scheme. There are no references to supporting the CSS property names without transformation. Newer specifications/drafts may have changed this, but I couldn't find a good reference.


The links quoo's answer provide indicate that style['border-color'] is in fact a non-standard, developer-friendly alternate access method supported by WebKit and Trident, but not Gecko or Opera.

Solution courtesy of: bfavaretto

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Setting style attributes dynamically and consistently between Chrome & FF

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×