在Safari中更改数据属性，但屏幕不会重新绘制为新的CSS样式 [英] Changing a data attribute in Safari, but the screen does not redraw to new CSS style

问题描述

在我的网站中，我创建了一个内容和导航元素.

In my website I have created a content and navigation element.

单击下一步"按钮后，我的Javascript将解释下一页并更改其父节点上的数据进行"属性.我的CSS包含几个选择器

Once the 'Next' button is clicked my Javascript will interpret the next page and change a 'data-progress' attribute on it's parent node. My CSS contains several selectors

.content [data-progress ="0"]> .progressNavigationHolder> .progressNavigation> div:nth-​​child(1)

.content[data-progress="0"] > .progressNavigationHolder > .progressNavigation > div:nth-child(1)

和

.content [data-progress ="0"]> .progressPages> ul

.content[data-progress="0"] > .progressPages > ul

，以便选项卡更改为按下状态，页面的左边距将增加480px.

so that the tab changes to a pressed state, and the page's margin-left will be incremented by 480px.

这一切都很好用(如果编写和解释时有些混乱)，因此代码会将 data-progress 更改为递增的值，并且CSS选择器链接到正确的节点.但是，仅就检查员而言，这是正确的，但实际上，屏幕/视口并未更新以显示此更改.

This all works great (if a bit confusing to write and explain), whereby the code will change the data-progress to the incremented value as well as the CSS selectors link to the correct node. However, this is only true as far as the inspector is concerned, but in reality, the screen/viewport is not updated to show this change.

这在Chrome中效果很好，但由于某些原因Safari不想显示它.

This works great in Chrome but for some reason Safari does not want to show it.

如果有帮助，我将在Windows上运行Safari 5.1.7.

If it is any help I am running Safari 5.1.7 on Windows.

推荐答案

好，因此，为了克服此问题，我在Javascript中更改了标记的类.似乎是强制重画屏幕.

Ok, so to overcome this issue, I changed a class of a tag in my Javascript. It seems to be force redrawing the screen.

这篇关于在Safari中更改数据属性，但屏幕不会重新绘制为新的CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！