javascript - 在内联样式中删除了无效的 css 属性

Question

我在一个元素中定义了一些内联样式

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

然后我想使用 javascript 设置样式。

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

输出变为:

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

测试http://jsfiddle.net/P7eBN/

浏览器删除了我不希望它执行的 -ms-grid-row 属性，因为我正在编写一个插件，它使用 -ms-grid-row 属性读取内联样式，因此 -ms-grid-row 需要以某种方式保存下来。使用 jQuery 时也是如此，例如。 $(box).height(100)

我怎样才能以最好的方式允许用户通过 style.height 设置高度并且之后仍然能够以某种方式读取 -ms-grid-row 属性？

Answer 1

我正在编写一个使用 -ms-grid-row 属性读取内联样式的插件，因此需要以某种方式保留 -ms-grid-row。听起来像是数据属性的工作:

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

并且您的插件会将其读取为(跨浏览器方式)

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

或者对于现代浏览器:

box.dataset.msGridRow