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

Question

我正在woocommerce網站上工作，並且已經購買了2個插件，以便可以在我的產品頁面中自定義商品。 插件演示可以在這里找到：

在此演示中，有2個插件，一個名為Multistep Product Configurator（MSPC），它是頁面頂部的標簽；另一個是Fancy Product Designer（FPD），它是其下面的產品顯示面板。

我想使用這兩個插件將它們彼此相鄰顯示，以避免向下滾動頁面以查看使用MSPC插件所做的更改。

因此，我一直在嘗試自定義CSS代碼達數小時之久，但沒有成功。 您可以在這里看到我的頁面：我最終在主題的自定義js部分中使用了自定義javascript代碼，該代碼基本上在頁面加載后幾秒鍾重新定位了包裝器。

我的問題是，通過js代碼，我在除野生動物園之外的所有瀏覽器中都實現了我想要的功能！

這是我使用的代碼：

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似乎不支持“完成”狀態。 請嘗試使用“已加載”（如果文檔已完全加載還是剛剛加載都沒關系），因為似乎所有瀏覽器都支持它。
參考

為確保確定，請嘗試對其進行調試或放入console.log中，以查看if語句是否返回true。

Answer 3

好了朋友們，

非常感謝您抽出寶貴的時間對此做出回應。 我要做的是在content-single-product.php中添加一個鈎子，然后可以使用CSS代碼對其進行修復。

我不需要最后添加javascript。

感謝您的回復！