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

Answer 2

这是怎么回事？

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

当您编写任何CSS样式时，它将被过滤并由浏览器应用于元素。比如说，你写这个CSS：

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

当您在Chrome开发者工具中进行检查时，您只会看到-webkit-border-radius: 5px;，而其他人则不会被应用。

<强>解决方案

假设您正在为适当版本的浏览器提供HTML，那么您可以使用data-属性。以这种方式发送样式：

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;"

现在您已阅读data-style，而不是style。你的最终代码有点像：

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

我在Internet Explorer 9上尝试了您的页面，并且按预期保留了该属性。 Internet Explorer以外的浏览器会忽略-ms-前缀。因此你无法看到它。

无效的css属性将以内联样式删除

4 个答案: