如何删除外部脚本添加的内联样式？

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 ，像这样可以这样做。