时间戳

首页 > 解决方案 > 如何在 html 中设置脚本输出的样式？

javascript - 如何在 html 中设置脚本输出的样式？

问题描述

如何设置 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>

标签： javascripthtml

解决方案

.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>

推荐阅读