如何刪除外部腳本添加的內聯樣式？

Question

我有一個<script> ，它生成一個<style>和帶有!important標簽的內聯樣式屬性。 我想刪除所有這些樣式。

我的計划是使用 javascript onload回調（和一些 jQuery）來刪除<style>塊和所有內聯樣式屬性——但我似乎無法選擇這些元素中的任何一個。 這是我一直在玩弄的：

var script = document.createElement("script");

script.src      = "//script.path.js";
script.onload   = function(){

    $(this).parent().find("style").remove();
    $(this).parent().find("[style]").removeAttr("style");

};

$(target).append(script);

更新

似乎<script>生成的元素不能立即在 DOM 中使用。 如果我先使用setInterval檢查元素是否存在，我就可以讓它工作。 我想有更好的方法來做到這一點......

Answer 1

根據this other question ，您必須在設置onload之前將script標記附加到 DOM。

var script = document.createElement("script");
$(target).append(script);

script.src = "//script.path.js";
script.onload = function(){
  $(this).parent().find("style").remove();
  $(this).parent().find("[style]").removeAttr("style");
};

https://jsbin.com/minoyeyicu/edit?html,js,output

UPDATE：已經澄清，問題是， style標簽/屬性還沒有被應用到DOM，直到下載腳本執行后，一個可供選擇（取決於加載腳本是否是你的控制之下），是通過一個加載腳本的callback參數，並讓加載的腳本在完成執行后執行回調（這是Google Maps API 的工作方式）。 例如

script.src = '//script.path.js?callback=removeStyles'

為了使用callback從內部參數script.path.js ，像這樣可以這樣做。