javascript - 如何修改由外部 javascript 创建的元素的类

Question

我的网站上有一个嵌入式脚本，用于创建具有特定类的按钮。我在我的网页上的两个地方显示它，但想为这两个地方的按钮分配不同的样式。我的问题:有没有办法只在显示它的地方“覆盖”由这个外部脚本创建的元素的类属性？

我控制的代码如下所示:

<div class="homepageslide">
    <script src="https://tool.reframeyourclients.com/js/insertfill-z0f1d1db4-41f6-4543-8de1-6d080ae1635b.js" type="text/javascript" id="ryc-insert-script-z0f1d1db4-41f6-4543-8de1-6d080ae1635b" onclick="javascript:ga('send', 'event', 'homepage-slider-grader', 'click');">
    </script>
</div>

并且在网站上呈现为:

<div class="homepageslide">
    <span id="ryc-fill-button-z0f1d1db4-41f6-4543-8de1-6d080ae1635b" type="button" class="rycfill-btn" style="color: rgb(122, 128, 0); border: 1px solid rgb(175, 183, 0); border-radius: 4px; font-family: Ubuntu-Regular; font-size: 15px;">Start Survey +</span>
    <script src="https://tool.reframeyourclients.com/js/insertfill-z0f1d1db4-41f6-4543-8de1-6d080ae1635b.js" type="text/javascript" id="ryc-insert-script-z0f1d1db4-41f6-4543-8de1-6d080ae1635b">
    </script>
</div>

嵌入式脚本会创建该元素，我想为其操作类(删除“rycfill-btn”并添加“myClass”)并可选择删除遵循井的样式。这可能/如何实现？

提前致谢!

Answer 1

当然。您可以只修改脚本应用于元素的现有类以更改其外观。但是您在评论中提到您想要编辑按钮的一次实例而不是其他实例。如果该按钮具有某些特殊属性(例如，它始终是其父项的第 n 个子项)，您仍然可以使用正确的 CSS 选择器来完成此操作。但除此之外，您可以使用 JavaScript 来完成。

只需编写一个在现有脚本完成后运行的脚本。然后选择目标按钮并删除其现有类并替换它。

elements = document.getElementsByClassName('rycfill-btn');
theButton = elements[3]; // or whatever you need to do to get the one you want and ignore the other one
theButton.className = 'myClass'; // This should both add the new class and overwrite the old one

当然，您需要一些方法来区分您想要更改的按钮和您不想更改的按钮。如果您确实想要先进行更改，则可以在加载按钮之前运行修改按钮的脚本。否则，您需要了解一些相关信息(例如，它始终是页面上的第二个实例)。

如果您使用 jQuery 或其他一些 DOM 操作库，您可能会做得更优雅。