Search code examples
javascriptcssinline-styles

Invalid css property gets removed in inline style

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?

Solution

  • 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