切邊/更換內嵌CSS的JavaScript

-1

我有一個內聯CSS設置爲看起來像這樣的跨度元件：切邊/更換內嵌CSS的JavaScript

<span style="background-image: url(http://example.com/House-150x150.jpg)" class="list-cover has-image"></span>

我想去掉它的「-150150」的一部分，使我最終up這樣的事情：

<span style="background-image: url(http://example.com/House.jpg)" class="list-cover has-image"></span>

我需要它與JavaScript的exlusively，無需導入JQuery庫。我試圖用很多方式使它工作，但我還是找不到解決辦法。

謝謝！

來源

2017-06-16 BigWebUy

請仔細閱讀[如何接受答案]（http：//meta.stackoverflow.c om/questions/5234/how-does-accepting-an-answer-work） – mplungjan

var span = document.querySelector(".list-cover"); 
 
span.setAttribute("style",span.getAttribute("style").replace(/-150x150/, ""));

<span style="background-image: url(http://example.com/House-150x150.jpg)" class="list-cover has-image">Right-click and inspect to see the change</span>

來源

2017-06-16 21:23:37 mplungjan

是的，現在你沒有;-) – karthick

它看起來像正確的方法。然而，當它應用到我的網站時，我得到一個錯誤，說：「不能讀取屬性'未定義的getAttribute'..它看起來它沒有在DOM中找到正確的元素：/ FYI，應用CSS樣式的唯一方法這些lements是通過調用像這樣的跨度：「span.list-cover.has-image」。如果我嘗試單獨使用「.list-cover」，則樣式不適用。對於我的情況，你有什麼想法來實現解決方案的最佳方式？非常感謝！！！ – BigWebUy

正如你可以看到我的代碼的作品，所以請發佈實際[mcve]與來自視圖源的HTML – mplungjan

var x = document.getElementsByTagName("span")[0].getAttribute("style"); 
var x2 = x.replace("-150x150",""); 

document.getElementsByTagName("span")[0].setAttribute("style",x2);

來源

2017-06-16 21:27:12 Max08

太遲;）....也DRY – mplungjan

我得到一個錯誤，說：「無法讀取屬性'未定義的屬性'getAttribute'..它看起來像它沒有找到DOM：/ – BigWebUy

您可以使用正則表達式，因此可以更動態：

var x = '<span style="background-image: url(http://example.com/House-150x150.jpg)" class="list-cover has-image"></span>'; 
x.replace(/(url\(.*)(\-.*)(\..*\))/i, '$1$3');

在這裏，您可以看到組$ 1，$ 2，$ 3：https://regex101.com/r/lokdTU/1

來源

2017-06-16 21:45:33 hardkoded

切邊/更換內嵌CSS的JavaScript

回答

相關問題