我有一些简单的JavaScript来影响风格的变化:

sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;

这适用于最新版本的FF、Opera和IE,但不适用于最新版本的Chrome和Safari。

它会影响两个后代,而这两个后代恰好是兄弟姐妹。第一个兄弟更新,但第二个没有。第二个元素的子元素也有焦点,并包含< A >标记,该标记在onclick属性中包含上述代码。

在Chrome的“开发人员工具”窗口中,如果我轻推(例如取消勾选&勾选)任何元素的任何属性,第二个兄弟更新为正确的样式。

是否有一种解决方法可以简单地通过编程“推动”WebKit做正确的事情?


当前回答

因为每个人似乎都有自己的问题和解决方案,我想我应该添加一些适合我的东西。在Android 4.1与当前的Chrome,试图拖动一个画布在一个div溢出:隐藏,我不能得到重画,除非我添加了一个元素的父div(在那里它不会做任何伤害)。

var parelt = document.getElementById("parentid");
var remElt = document.getElementById("removeMe");
var addElt = document.createElement("div");
addElt.innerHTML = " "; // Won't work if empty
addElt.id="removeMe";
if (remElt) {
    parelt.replaceChild(addElt, remElt);
} else {
    parelt.appendChild(addElt);
}

没有屏幕闪烁或真正的更新,并清理自己。没有全局变量或类作用域变量,只有局部变量。在移动Safari/iPad或桌面浏览器上似乎没有任何损害。

其他回答

一个简单的解决方案与jquery:

$el.html($el.html());

or

element.innerHTML = element.innerHTML;

有一个SVG,当它被添加到html时不显示。

这可以在svg元素出现在屏幕上之后添加。

更好的解决方案是使用:

document.createElementNS('http://www.w3.org/2000/svg', 'svg');

使用jQuery:

$(svgDiv).append($(document.createElementNS('http://www.w3.org/2000/svg', 'g'));

这将在Chrome上正确渲染。

这段代码将重新渲染css

 document.body.style.display = 'flex';
 setTimeout(() => (document.body.style.display = ''), 0);

我发现了一些复杂的建议和许多简单的不起作用的建议,但Vasil Dinkov对其中一个建议的评论提供了一个简单的解决方案来强制重绘/重绘,工作得很好:

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';

我将让其他人评论,如果它适用于“块”以外的样式。

谢谢,Vasil !

由于显示+偏移触发不适合我,我在这里找到了一个解决方案:

http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/

i.e.

element.style.webkitTransform = 'scale(1)';

这对JS来说很好

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';

但在Jquery中,特别是当你只能使用$(document)时。Ready并且由于任何特定原因不能绑定到对象的.load事件,下面将工作。

您需要获取对象/div的OUTER(MOST)容器,然后将其所有内容删除到一个变量中,然后重新添加它。 它将使所有在外部容器内所做的更改可见。

$(document).ready(function(){
    applyStyling(object);
    var node = $("div#body div.centerContainer form div.centerHorizontal").parent().parent();
    var content = node.html();
    node.html("");
    node.html(content);
}