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

回答

相关问题