JDB*_*JDB 5 html javascript css internet-explorer-8
上下文:我有一个HTML页面,它使用HTML5数据属性.我的一些CSS样式使用属性选择器根据这些自定义属性的值设置元素样式.
问题:当我使用JavaScript更新数据属性的值时,Chrome会通过重新设置受影响的元素来正确响应,但IE8(我需要支持)不会立即响应.让IE8更新样式的唯一方法是通过其他方式直接摆弄CSS样式(例如删除或修改class属性).
例:
<html>
<head>
<style type="text/css">
.Test[data-foo="bar"]{ background-color: Green; }
.Test[data-foo="baz"]{ background-color: Red; }
</style>
<script src="scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
function change(div) { $(div).attr("data-foo", "baz"); }
function toggleTest() { $("DIV").toggleClass("Test"); }
</script>
</head>
<body>
<div data-foo="bar" onclick="change(this);" class="Test">Testing</div>
<div data-foo="bar" onclick="change(this);" class="Test">Testing</div>
<input type="button" onclick="toggleTest()" value="Toggle Class" />
</body>
</html>
在Chrome中,您可以单击Test1和Test2栏,它们会立即变为红色.在IE8中,您必须单击该栏,然后单击该按钮两次(一次删除该类,再次将其还原).
问题:解决方法是什么？显然我已经确定了一个(添加/删除类),但它很难看.是否有一种优雅,不引人注目的方式迫使IE8重新评估元素的风格而不会忽略元素的属性？
Sam*_*son 18
虽然许多属性在更改时会导致重排data-*,但Internet Explorer 8中的属性似乎并非如此.更改这些属性不会立即导致重新绘制元素 - 您必须手动触发重排.
el.setAttribute("data-foo", "foo");
el.style.opacity = 1;
在上面的例子中,我通过将元素的不透明度设置为1来触发重排.您还可以将zoom属性设置为1,或者甚至将元素的className设置为自身:
el.className = el.className;
其中任何一个都应该立即应用基于属性选择器的新样式.好消息是,这是在IE8中,这是一个广泛使用数据属性之前的浏览器,所以虽然我们不得不在那里受苦,但我们不必使用IE9或IE10 - 这两个版本都可以正常使用任何特别注意回流问题.
| 归档时间： |
|
| 查看次数： |
8480 次 |
| 最近记录： |