如何修改由外部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操作庫，則可以更優雅地使用它。