注意:我之前有一个类似的问题，现在我试图将其删除。我认为问题与 .NET webbrowser 控件有关，但它与 IE 有关。
以下代码是一个 .htm 文件的内容，该文件仅显示 3 个可以单击的元素。当单击每个元素时，javascript 方法将其背景更改为蓝色，并将先前选择的元素背景更改回白色。
这就是问题，它只出现在 IE8、9 和 10 中。它在 FF、chrome 中工作，我设法使用 IE10 开发人员预览版证明它在 IE5 和 IE7 中工作。
单击元素 1，然后单击元素 1.1 - 元素 1.1 突出显示，但元素 1 未取消突出显示。
但是(向上移动文档树):
点击 ITEM 1，然后 ROOT - 没问题
单击 ITEM 1,1，然后单击 ITEM 1 - 没问题。
现在，如果我将 javascript selectElement(e) 方法切换为先取消选择然后选择，问题就变成了:
单击元素 1.1，然后单击元素 1 - 在单击元素 1 和显示蓝色背景之间存在明显的延迟。
如果删除图像标签，问题就会消失。
将元素滚动出 View 然后再次返回可以修复渲染。不幸的是，调用 Invalidate 或 Update 并不能解决问题。
将先前选择的元素的显示样式切换为无然后再返回可以解决问题 - 除非用户错误地选择了节点文本(例如双击)
我尝试过的一些事情:
- 我尝试完全替换 outerhtml 而不是仅仅更改类，但这没有任何区别。
- 删除图片标签并包含背景图片没有任何区别。
代码
*在自己的机器上测试时，网页会找不到'expand_tree_20x8.png'文件；这并不重要，因为无论是否可以找到图像，都会表现出这种行为。重要的是图像标签必须在文件中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
span, img {margin:0;padding:0}
.child {margin-left: 10px;}
.normal {background-color: White;}
.selected {background-color: blue; color: white;}
</style>
<script type="text/javascript">
var selectedElement;
function selectElement(e) {
/* Select new element */
e.attributes["class"].value = "selected";
/* Unselect currently selected */
if (selectedElement) {
selectedElement.attributes["class"].value = "normal";
}
selectedElement = e;
}
</script>
</head>
<body>
<div>
<div class="child"><label id="root_id" class="normal" onclick="selectElement(this)">ROOT</label></div>
<div class="child"><img alt="img" src="temp/expand_tree_20x8.png" />
<label id="item1_id" class="normal" onclick="selectElement(this)">ITEM 1</label>
<div class="child"><img alt="img" src="temp/expand_tree_20x8.png" />
<label id="item1_1_id" class="normal" onclick="selectElement(this)">ITEM 1.1</label>
</div>
</div>
</div>
</body>
</html>
最佳答案
这可能不会解决您面临的重绘问题，但它太长了，无法包含在评论中。
变量e 通常代表一个事件对象，而不是一个dom 对象。因此，当其他开发人员查看您的代码时，这会让他们感到困惑。将其更改为 elem、ele、domObj 或除 e 以外的任何其他内容。
其次，您设置类名的方式很奇怪。我希望看到 className。
var selectedElement;
function selectElement(elem) {
/* Select new element */
elem.className = "selected";
/* Unselect currently selected */
if (selectedElement) {
selectedElement.className = "normal";
}
selectedElement = elem;
}
使用一些辅助函数来添加和删除类可能会更好，这样您就可以在元素上拥有多个类。
function hasClass(elem, cls) {
return elem.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(elem, cls) {
if (!this.hasClass(elem, cls)) elem.className += " " + cls;
}
function removeClass(elem, cls) {
if (hasClass(elem, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
elem.className = elem.className.replace(reg, ' ');
}
}
var selectedElement;
function selectElement(elem) {
/* Select new element */
addClass(elem, "selected");
/* Unselect currently selected */
if (selectedElement) {
removeClass(selectedElement, "normal";
}
selectedElement = elem;
}
有时读取高度会强制重绘，所以尝试做这样的事情
var selectedElement;
function selectElement(elem) {
/* Select new element */
addClass(elem, "selected");
/* Unselect currently selected */
if (selectedElement) {
removeClass(selectedElement, "normal";
}
/* Try to force a redraw */
//elem.style.display = "none"; //if just reading offsetHeight, does not work try uncommenting the two lines of code.
var redrawFix = elem.offsetHeight;
//elem.style.display = "block"; //or inline or whatever
selectedElement = elem;
}
关于javascript - 在 IE8、IE9 和 IE10 中使用 javascript 更改元素类名称时可能出现错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9601534/