我有一些简单的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做正确的事情?
当前回答
我来到这里，因为我需要在修改css后重新绘制Chrome中的滚动条。
如果有人有同样的问题，我通过调用这个函数来解决它:
//Hack to force scroll redraw
function scrollReDraw() {
$('body').css('overflow', 'hidden').height();
$('body').css('overflow', 'auto');
}
这种方法不是最好的解决方案，但它可能适用于所有情况，隐藏和显示需要重绘的元素可以解决所有问题。
这是我使用它的小提琴:http://jsfiddle.net/promatik/wZwJz/18/
其他回答
以上建议对我没用。但是下面这个可以。
想动态更改锚内的文本。“搜索”这个词。创建一个带有id属性的内部标签“font”。使用javascript管理内容(如下)
Search
脚本内容:
var searchText = "Search";
var editSearchText = "Edit Search";
var currentSearchText = searchText;
function doSearch() {
if (currentSearchText == searchText) {
$('#pSearch').panel('close');
currentSearchText = editSearchText;
} else if (currentSearchText == editSearchText) {
$('#pSearch').panel('open');
currentSearchText = searchText;
}
$('#searchtxt').text(currentSearchText);
}
我在使用Angular 10时也遇到了同样的问题。我尝试了许多方法，但似乎都不起作用。 对我来说有效的修复是通过JS处理它。我只是从DOM中删除了元素，并使用ngIf再次添加。
HTML:
<div *ngIf="showElement">
Contents of your element
</div>
JS:
this.showElement = false;
setTimeout(() => {
this.showElement = true;
}, 10);
这段代码将重新渲染css
document.body.style.display = 'flex';
setTimeout(() => (document.body.style.display = ''), 0);
丹诺顿方案对我不起作用。我有一些非常奇怪的问题，webkit不会画一些元素在所有;输入中的文本直到onblur才更新;并且改变className不会导致重绘。
我偶然发现，我的解决方案是在脚本之后向正文添加一个空的样式元素。
<body>
...
<script>doSomethingThatWebkitWillMessUp();</script>
<style></style>
...
这就解决了问题。这有多奇怪?希望这对某些人有所帮助。
我发现，只是添加一个内容样式的元素强制它重新绘制，这应该是一个不同的值，每次你想要它重新绘制，而不需要在一个伪元素。
.selector {
content: '1'
}
