使用 javascript 动态更改文本时保留 CSS

Retaining CSS when changing text dynamically with javascript

本文关键字：保留 CSS 文本 javascript 动态 使用      更新时间：2023-09-26

我一直在尝试用按钮随机化一个数字，但每次我点击按钮时，数字都会随机化，但文本会失去它的 CSS 样式。

.CSS

.numberStyle {
  padding: 10px 10px 10px 10px;
  color: blue;
}
.numberStyle span {
  font-size: 100px;
}

目录

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

爪哇语

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/

您希望

更改范围内的文本，而不是 #number1

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

您的目标是 <span> 元素的父元素，然后更改其文本，这实际上是删除范围并将其替换为仅数字。您可以通过定位范围或在要添加的文本中包含范围来解决此问题。

感谢您的回答！

我针对<span>元素并且有效。

print()函数替换为以下代码。

function print() {
  $("#number1 > span").text(no1);
}
相关文章：