Invalid css property gets removed in inline style

Question

I have defined some inline-style in a element

<div id="box" style="-ms-grid-row:1; background-color: yellow;"></div>

and then with javascript I want to set a style.

var box = document.getElementById('box');
box.innerHTML += '<br>before: ' + box.getAttribute('style');
box.style.height = '100px';
box.innerHTML += '<br>after: ' + box.getAttribute('style');

and the output becomes:

before: -ms-grid-row:1; background-color: yellow;
after: background-color: yellow; height: 100px;

Test http://jsfiddle.net/P7eBN/

The browser removed -ms-grid-row property which I dont want it to do, because I am writing a plugin that reads inline-style with -ms-grid-row property so -ms-grid-row need to be preserved somehow. The same is it when using jQuery eg. $(box).height(100)

How can I in the best way allow users set height by style.height and still be able to read -ms-grid-row property afterwards somehow?

Answer 1

I am writing a plugin that reads inline-style with -ms-grid-row property so -ms-grid-row need to be preserved somehow . Sounds like the job for data attributes:

<div id="box" data-ms-grid-row="1" style="background-color: yellow;"></div>

And your plugin will read it as (cross-browser way)

box.getAttribute('data-ms-grid-row')

or for modern browsers:

box.dataset.msGridRow

Answer 2

what about this?

var box = document.getElementById('box');
box.innerHTML += '<br>before: ' + box.getAttribute('style');
box.setAttribute('style', box.getAttribute('style') + ' height : 100px;');
box.innerHTML += '<br>after: ' + box.getAttribute('style');

Answer 3

When you write any CSS styles, it will be filtered and applied to the elements by the browser. Say, for eg., you write this CSS:

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

When you inspect in the Chrome Developer Tools, you will only see -webkit-border-radius: 5px; and others will not be applied.

Solution

Assuming you are serving the HTML to a decent version of browsers, so you can make use of the data- attributes. Send the styles to both this way:

style="border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;"
data-style="border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;"

And now you read the data-style , instead of style . Your final code will be somewhat like:

var box = document.getElementById('box');
box.innerHTML += '<br>before: ' + box.getAttribute('data-style');
box.setAttribute('style', box.getAttribute('style') + '; height : 100px');
box.innerHTML += '<br>after: ' + box.getAttribute('data-style');

Answer 4

I tried your page on Internet Explorer 9 and the property was preserved as expected. The -ms- prefix is ignored by browsers other than Internet Explorer. And hence you are not able to see it.