將 CSS class 應用於 Javascript

Question

首先，我只想知道 state，當涉及到 Javascript 時，我幾乎一無所知，所以如果我使用了錯誤的行話，請原諒我。

我正在嘗試為 tumblr 進行布局，其中側邊欄圖像將在刷新時更改。 我正在使用現有的布局並遵循另一個關於如何實現效果的教程。

側邊欄的 CSS class 稱為“side-img”。

原始布局中的 CSS 如下

<img class="side-img" src="{image:Sidebar Image}">  

在另一個教程中，我被要求用以下代碼替換它，以使不斷變化的側邊欄圖像正常工作。

<script language="JavaScript">
<!--
 
 
function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="IMAGE URL"
myimages[2]="IMAGE URL"
myimages[3]="IMAGE URL"
 
 
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()
//-->
</script>

側邊欄圖像在刷新時確實發生了變化，但現在它也丟失了在原始布局中為其設置的所有 CSS class 樣式（例如圓角、邊框寬度、顏色等）。

尋求這方面的建議。 謝謝！

Answer 1

這是因為您正在創建一個新元素

document.write('<img src="'+myimages[ry]+'" border=0>')

並且該元素缺少賦予其樣式的 css class 。

嘗試

document.write('<img class="side-img" src="'+myimages[ry]+'" border=0>')

Answer 2

多個問題，但

<script language="JavaScript">

無效， <script>標簽沒有language屬性。

有，但已棄用。

var myimages=new Array()

不建議創建這樣的數組，最好使用：

var images = []

如果您想隨機更改圖像的src屬性，可以使用以下方法：

<img class="side-img" id="random-image">  

<script>
var images = ["1.png", "2.png"]
var index = Math.floor(Math.random() * images.length)

document.querySelector("#random-image").src = images[index]
</script>