Question

我正在开设一个woocommerce网站，我购买了2个插件，可以自定义产品页面中的项目。可以找到插件演示here：

在这个演示中有2个插件，一个叫做Multistep Product Configurator（MSPC），它是页面顶部的标签，另一个叫做Fancy Product Designer（FPD），它是它下面的产品显示面板。 / p>

我想使用这两个插件将它们彼此相邻显示，以避免向下滚动页面以查看使用MSPC插件所做的更改。

所以我一直在尝试自定义css代码数小时而没有成功。您可以看到我的页面here：我最终在我的主题的自定义js部分中使用自定义javascript代码，它基本上在页面加载后几秒重新定位包装器。

我的问题是，使用js代码，我在除safari之外的所有浏览器中都实现了我想要的功能！

以下是我使用的代码：

document.onreadystatechange = function(){
 if(document.readyState === 'complete'){
     setTimeout(function () {
         var x = document.getElementsByClassName("mspc-wrapper");
         x[0].style.float = "none";
     }, 3000);
 }

}

知道为什么它在Safari浏览器中不起作用？随意尝试用CSS修复它，但我很确定它不起作用...... 任何反馈都非常赞赏。

Answer 1

在我看来，更改样式的代码是错误的：

 x[0].style.styleFloat //returns undefined

你会想要使用

x[0].style.float = 'none';

如果这不起作用，请确保js正在运行：）

Answer 2

Safari似乎不支持州“完整”。尝试使用'loaded'代替（如果文档是否已经完全加载或刚加载）并不重要，因为它似乎得到所有浏览器的支持。
Reference

只是为了确保，尝试调试它或者输入console.log以查看if语句是否返回true。

Answer 3

好的，

非常感谢您花时间回应这个问题。我必须做的是在content-single-product.php中添加一个钩子然后我可以用CSS代码修复它。

我最近不需要添加javascript。

感谢您的回复！

自定义Javascript在Safari中不起作用？

3 个答案: