如何設置HTML腳本輸出的樣式？

Question

如何設置js函數的輸出樣式。 我希望該顏色為白色，居中。

我嘗試在innerHTML = + x +之后編寫

 function getNumber(){ var x = document.getElementById("value-number").value document.getElementById("numbers").innerHTML=x } 

 <div style="margin-left:30px";> <select id = "value-number"> <option value="5555-555">Kate</option> <option value="4444-444">My</option> </select> <button onclick="getNumber()"> Show me </button> </div> <p id="numbers"></p> 

Answer 1

.style用於將所需的CSS屬性添加到元素

 function getNumber(){ var x = document.getElementById("value-number").value var elm = document.getElementById("numbers") elm.innerHTML = x elm.style.backgroundColor = '#F00' elm.style.olor = '#0F0' } 

 <div class="picker"> <select id = "value-number"> <option value="5555-555">Kate</option> <option value="4444-444">My</option> </select> <button onclick="getNumber()"> Show me </button> </div> <p id="numbers"></p> 

另外，您可以添加我更喜歡的CSS類。

 function getNumber(){ var x = document.getElementById("value-number").value var elm = document.getElementById("numbers") elm.innerHTML = x elm.classList.add('my-style') } 

 .my-style { background-color: #F00; color: #0F0; text-align: center; } 

 <div class="picker"> <select id = "value-number"> <option value="5555-555">Kate</option> <option value="4444-444">My</option> </select> <button onclick="getNumber()"> Show me </button> </div> <p id="numbers"></p> 

Answer 2

嘗試

document.getElementById("numbers").style.color = "white";

document.getElementById("numbers").style.textAlign = "center";