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

Question

If I'm doing this in JavaScript :

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

Then HTML :

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

The output (suppose input is 3):

3 is a number 

So the question is :

How can I color, maybe by css, the variable into Javascript, the output something like:

3 is a number

Answer 1

You could wrap your num by span :

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

Then add a css rule for this specific span inside paragraph that have id #isNum :

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

Hope this helps.

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

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

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

Answer 2

Using <em> to emphasize the input would be more appropriate in this case.

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

Here is a sample snippet to work with (hope it is self-explanatory).

Idea is to wrap the value which we need to be emphasize in an inline element (for example, span or em ).

Note that <b> or i or <em> elements could also be used to get the results.

 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"; } 

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

 <div> <input type="text" id="numValue" /> <button onclick="checknum()">Insert anything</button> <p id="isNum"></p> </div> 

Answer 3

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

Or (and this is generally considered a better practice) you could set a class on that span rather than an inline style. Then define the color for that class in your CSS, wherever that lives for your page.

JS:

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

CSS:

.number { color: red; }

Answer 4

Just add an element

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

And style that class

 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"; } 

 .red {color : red} 

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

Answer 5

Try this:

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

Answer 6

You'll need to wrap the number with a DOM element

Suppose this is the rendered HTML

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

then add CSS

.num-color {
 color: yellow;
}

In order to get the HTML above, change your JavaScript code to this:

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