Question

如果我在JavaScript中这样做：

.......
if (!isNaN(num))
    document.getElementById("isNum").innerHTML = num +" is a number";
......

然后HTML：

<div>
    <button onclick="checknum()">Insert anything : </button>
    <p id="isNum"></p>  
</div>

输出（假设输入为3）：

3 is a number

所以问题是：

我怎样才能将css变量变成Javascript，输出类似于：

3 is a number

Answer 1

你可以用span：

包裹你的num

document.getElementById("isNum").innerHTML = '<span>'+num+"</span> is a number";

然后为段落中具有标识#isNum的

的特定范围添加css规则

#isNum span{
    font-weight: bold;
    color: green;
}

希望这有帮助。

＆＃13;

var num = 3;

if (!isNaN(num))
    document.getElementById("isNum").innerHTML = '<span>'+num+"</span> is a number";

＆＃13;

#isNum span{
    font-weight: bold;
    color: green;
}

＆＃13;

<div>
    <p id="isNum"></p>  
</div>

＆＃13;

Answer 2

在这种情况下，使用<em> 强调输入会更合适。

＆＃13;

<p id="isNum"><em>3</em> is a Number</p>

＆＃13;

这是一个可以使用的示例代码段（希望它是不言自明的）。

想法是包装我们需要在inline元素中强调的值（例如，span或{{1 }}）。

请注意，<b>或i或<em>元素也可用于获取结果。

＆＃13;

em

＆＃13;

function checknum() {

  // Get the `output` element
  var outputElement = document.querySelector("#isNum");

  // Get the `input` value 
  var num = document.querySelector("#numValue").value;

  // Validate: do we have a value and is it a number?
  var isNumber = num.length > 0 && !isNaN(num);

  // Format the HTML string to output
  // Wrap the value inside an inline element so that we could style it separately 
  var outputHTML = "<em>" + num + "</em>";

  // Output
  outputElement.innerHTML = isNumber ?
    outputHTML + " is a number" :
    "Not valid";
}

＆＃13;

#isNum > em {
  color: blue;
}
#isNum > span {
  /* incase we go with span */
  font-weight: bold;
  font-style: italic;
  color: blue;
}

＆＃13;

Answer 3

document.getElementById("isNum").innerHTML = "<span style='color: red;'>" + num +"</span> is a number";

或者（通常认为这是一种更好的做法）你可以在该范围内设置一个类而不是内联样式。然后在CSS中定义该类的颜色，无论页面的位置如何。

JS：

innerHTML = "<span class='number'>" + num +"</span> is a number";

CSS：

.number { color: red; }

Answer 4

只需添加一个元素

element.innerHTML = "<span class='blue'>" + num +"</span> is a number";

和那个班级的风格

＆＃13;

function checknum() {
  var num  = prompt('Insert anything');
  var element = document.getElementById("isNum");
  
  if (!isNaN(num))
    element.innerHTML = "<span class='red'>" + num + "</span> is a number";
}

＆＃13;

.red {color : red}

＆＃13;

<div>
    <button onclick="checknum()">Insert anything : </button>
    <p id="isNum"></p>  
</div>

＆＃13;

Answer 5

试试这个：

   if (!isNaN(num))
    document.getElementById("isNum").innerHTML = '<span class="red">' + num +"</span> is a number";

Answer 6

您需要使用DOM元素包装数字

假设这是呈现的HTML

<p id="isNum"><span class="num-color"> 1</span> is a color</p>

然后添加CSS

.num-color {
 color: yellow;
}

要获取上述HTML，请将您的JavaScript代码更改为：

document.getElementById("isNum").innerHTML = '<span class="num-color">' + num + '</span>' +' is a number';

如何设置段落内的动态内容的样式？

6 个答案: