如何修改由外部javascript

时间:2016-07-07 11:16:04

标签: javascript html css

我的网站上有一个嵌入式脚本,它创建了一个具有特定类的按钮。我在我的网页上的两个地方显示这个,但是想要在两个地方为按钮指定不同的样式。我的问题是:有没有办法覆盖'由此外部脚本创建的元素的class属性,仅在显示它的位置?

我控制的代码如下所示:

<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>

嵌入式脚本会创建该元素,我想要操作该类(删除&#39; rycfill-btn&#39;并添加&#39; myClass&#39;)并可选择删除井后的样式。这可能/怎么样?

提前致谢!

1 个答案:

答案 0 :(得分: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操作库,你可以更优雅地完成它。