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

Question

我有一个数据属性为"data-layout"的列表，它可以得到两个选项"vertical"和"horizontal"。

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

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

如果我输入 IE 的 devtools 和 select 元素面板中的项目，那么它只会重绘到正确的状态。

这里是问题的重现。

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

这似乎是 IE 没有看到它需要重绘。

这里有一个稍微不雅的方法，但它说明了问题。

添加一个函数来隐藏然后立即显示给应该改变的元素会强制重绘并且更新似乎有效。我不确定你是否能够将这件事向前推进——你可能需要选择一种不同的方式来强制重绘，或者你最终应用的样式可能会强制重绘，这样你就可以完全失去它，但它至少现在执行了切换。

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';
    }

    list.style.display = "none"
    list.style.display = "block"    
});

Answer 2

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

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

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

Answer 3

由于某些原因，在 Javascript

中使用 HTMLElement.dataset 时，IE11 不会重绘 dom

例如，当您单击按钮时，下面的代码片段在 IE11 上不起作用 - 框颜色没有按预期从红色变为蓝色。

要解决此问题，请在按钮事件侦听器中改用 test.setAttribute('data-action','style');。

var button = document.getElementById('check');
var test = document.getElementById('test');
button.addEventListener('click', function(evt) {
  test.setAttribute('data-action', 'style');
});

#test {
  width: 200px;
  height: 200px;
  background-color: red;
}

#test[data-action="style"] {
  background-color: blue;  
}

<div id="test"></div>
<button id="check">Click Me</button>

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

CSS styling via data attribute is not working properly on IE

css

internet-explorer

custom-data-attribute