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

【问题标题】：CSS styling via data attribute is not working properly on IE通过数据属性的 CSS 样式在 IE 上无法正常工作
【发布时间】：2015-10-13 19:29:04
【问题描述】：

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

在我的 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>

【问题讨论】：

哎呀！真可惜。这似乎是 IE-11 的一个错误。在进行快速网络搜索时，我找不到任何错误信息。同时，您可以使用getAttribute 和setAttribute 来完成您的工作：jsfiddle.net/abhitalks/x2tg4uhu/embedded/result

标签： css internet-explorer custom-data-attribute

【解决方案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"    
});

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

由于某种原因，在 Javascript 中使用 HTMLElement.dataset 时，IE11 不会重新绘制 dom

例如，当您单击按钮时，下面的 sn-p 在 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>

【讨论】：