使用javascript動態更改文本時保留CSS

我一直在嘗試用按鈕隨機化一個數字，但每次單擊按鈕時，數字都隨機化，但文本會丟失它的CSS樣式。使用javascript動態更改文本時保留CSS

CSS

.numberStyle { 
    padding: 10px 10px 10px 10px; 
    color: blue; 
} 

.numberStyle span { 
    font-size: 100px; 
}

的Html

<class id="number1" class="numberStyle"><span>1</span></class> 
<input type="button" value="MATCH!" style="font-size:50px;"></input>

的Javascript

function randomize() { 
    no1 = Math.ceil(Math.random() * 3); 
} 

function print() { 
    $("#number1").text(no1); 
} 

$().ready(function() { 

    $(":input").click(function() { 
    randomize() 
    print() 
    alert("Change") 
    }) 

})

我的jsfiddle鏈接：https://jsfiddle.net/he4rtbr0ken/9jfud4nz/2/

來源

2016-02-26 Weiping

你的目標的父元素，然後更改它的文本，這實際上是刪除跨度並將其替換爲只有數字。您可以通過定位跨度或在您要添加的文本中包括跨度來解決此問題。

來源

2016-02-26 02:03:02 Damon

你想改變的跨度內的文本，而不是＃NUMBER1

function print() { 
    $("span").text(no1); 
}

來源

2016-02-26 02:08:17

如果頁面上有多個「span」，則這不起作用。選擇器不夠具體。 – Centijo

跨度的點與任何其他要分類的標籤相同。如果他們需要更多的特異性，他們應該考慮添加一個類或者使用不同的標籤。這個答案對於給定的信息是最直接的。 –

感謝您的回答！

我針對<span>元素，它的工作原理。

用下面的代碼代替print()函數。

function print() { 
    $("#number1 > span").text(no1); 
}

來源

2016-02-26 02:16:31 Weiping

使用javascript動態更改文本時保留CSS

回答

相關問題