我有一些简单的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做正确的事情?


当前回答

这个答案是给那些在使用Angular 10的@danorton解决方案中苦苦挣扎的人的。 这个解决方案

sel.style.display='none';
sel.offsetHeight;
sel.style.display='';

适用于我只有“buildOptimizer”:false在angular。json文件。 看起来优化器以某种方式破坏了这个。

其他回答

我来到这里,因为我需要在修改css后重新绘制Chrome中的滚动条。

如果有人有同样的问题,我通过调用这个函数来解决它:

//Hack to force scroll redraw
function scrollReDraw() {
    $('body').css('overflow', 'hidden').height();
    $('body').css('overflow', 'auto');
}

这种方法不是最好的解决方案,但它可能适用于所有情况,隐藏和显示需要重绘的元素可以解决所有问题。

这是我使用它的小提琴:http://jsfiddle.net/promatik/wZwJz/18/

出于某种原因,我无法让danorton的答案工作,我可以看到它应该做什么,所以我稍微调整了一下:

$('#foo').css('display', 'none').height();
$('#foo').css('display', 'block');

这对我很有效。

我试着回答了更多的问题,但对我没用。 我有麻烦有相同的clientWidth与safari与其他浏览器相比,这段代码解决了这个问题:

var get_safe_value = function(elm,callback){
    var sty = elm.style
    sty.transform = "translateZ(1px)";
    var ret = callback(elm)//you can get here the value you want
    sty.transform = "";
    return ret
}
// for safari to have the good clientWidth
var $fBody = document.body //the element you need to fix
var clientW = get_safe_value($fBody,function(elm){return $fBody.clientWidth})

这真的很奇怪,因为如果我尝试在get_safe_value之后再次获得clientWidth,我用safari获得了一个坏值,getter必须在sty之间。transform = "translateZ(1px)"; 和猪圈。Transform = "";

另一个肯定有效的解决方法是

var $fBody = document.body //the element you need to fix
$fBody.style.display = 'none';
var temp = $.body.offsetHeight;
$fBody.style.display = ""
temp = $.body.offsetHeight;

var clientW = $fBody.clientWidth

问题是你失去了焦点和滚动状态。

我遇到了一个SVG的问题,当方向在某些情况下发生改变时,它在Chrome for Android上消失了。下面的代码没有重现它,但是我们的设置。

body { font-family: tahoma, sans-serif; font-size: 12px; margin: 10px; } article { display: flex; } aside { flex: 0 1 10px; margin-right: 10px; min-width: 10px; position: relative; } svg { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .backgroundStop1 { stop-color: #5bb79e; } .backgroundStop2 { stop-color: #ddcb3f; } .backgroundStop3 { stop-color: #cf6b19; } <article> <aside> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%"> <defs> <linearGradient id="IndicatorColourPattern" x1="0" x2="0" y1="0" y2="1"> <stop class="backgroundStop1" offset="0%"></stop> <stop class="backgroundStop2" offset="50%"></stop> <stop class="backgroundStop3" offset="100%"></stop> </linearGradient> </defs> <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="url(#IndicatorColourPattern)"></rect> </svg> </aside> <section> <p>Donec et eros nibh. Nullam porta, elit ut sagittis pulvinar, lacus augue lobortis mauris, sed sollicitudin elit orci non massa. Proin condimentum in nibh sed vestibulum. Donec accumsan fringilla est, porttitor vestibulum dolor ornare id. Sed elementum urna sollicitudin commodo ultricies. Curabitur tristique orci et ligula interdum, eu condimentum metus eleifend. Nam libero augue, pharetra at maximus in, pellentesque imperdiet orci.</p> <p>Fusce commodo ullamcorper ullamcorper. Etiam eget pellentesque quam, id sodales erat. Vestibulum risus magna, efficitur sed nisl et, rutrum consectetur odio. Sed at lorem non ligula consequat tempus vel nec risus.</p> </section> </article>

经过一天半的摸索,我对这里提供的俗气的解决方案并不满意,我发现这个问题是由于它在绘制新元素时似乎将元素保留在内存中引起的。解决方案是让SVG上的线性梯度的ID是唯一的,即使它在每页只使用一次。

这可以通过许多不同的方式实现,但对于我们的angular应用程序,我们使用lodash uniqueId函数向作用域添加一个变量:

Angular指令(JS):

scope.indicatorColourPatternId = _.uniqueId('IndicatorColourPattern');

HTML的更新:

第5行:<linearGradient ng- atr -id="{{indicatorColourPatternId}}" x1="0" x2="0" y1="0" y2="1">

第11行:<rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" ng- atr -fill="url(#{{indicatorColourPatternId}})" / >

我希望这个答案能让其他人省下一天砸键盘的时间。

以上建议对我没用。但是下面这个可以。

想动态更改锚内的文本。“搜索”这个词。创建一个带有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);
    }