通过数据属性的 CSS 样式在 IE 上无法正常工作

Question

我有一个数据属性为“data-layout”的列表，它可以得到“垂直”和“水平”两个选项。

在我的 CSS 中，我根据布局更改了列表项的显示属性。

在 chrome 上它按预期工作，但在 IE 上(在 IE11 上测试)它不会随着更改重绘屏幕。

如果我进入 IE 的 devtools 并选择元素面板中的元素，那么它只会重绘到正确的状态。

这是问题的再现。

http://fiddle.jshell.net/dimshik/bss3je3u/

谢谢你。

document.getElementById('toggle').addEventListener('click',function(){
    var list = document.getElementById('list');
    if(list.dataset.layout == 'vertical'){
        list.dataset.layout = 'horizontal';
    } else {
        list.dataset.layout = 'vertical';
    }  
});

[data-layout="horizontal"] li {
    display: inline;
    padding: 0 10px;
}

<ul id="list" data-layout="vertical">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>
<br>
<br>
<button id="toggle">Toggle Layout</button>

Answer 1

似乎 dataset 正在改变，但没有重新渲染 css。

我已将您的代码更改为 setAttribute 并且它有效(IE11)；

http://fiddle.jshell.net/bss3je3u/2/