Question

我希望我的输出标签显示带有度数字符的范围值。

<form>
<input type="range" value="0" name="angle" list="ranges" min="0" max="180" step="15" onchange="degree.value=value">
<output id="degree">0°</output>
</form>

http://jsfiddle.net/b90L30wv/

我该怎么办？

Answer 1

就是这样：

<output id="degree">0</output>°

http://jsfiddle.net/b90L30wv/1/

Answer 2

您可以使用CSS after规则：

＆＃13;

#degree::after {
    content: "°";
}

#degree {
  color: red;  
}

＆＃13;

<form>
<input type="range" value="0" name="angle" list="ranges" min="0" max="180" step="15" onchange="degree.value=value">
<output id="degree">0</output>
</form>

＆＃13;

Answer 3

如果您希望output元素包含度数符号（°），只需将其附加到其值：

<form>
<input type="range" value="0" name="angle"
  list="ranges" min="0" max="180" step="15" onchange=
  "document.getElementById('degree').value = this.value + '°'">
<output id="degree">0°</output>
</form>

（尽管id属性值可以用作全局变量，但如果它们满足标识符的语法规则，则很容易造成混淆和风险。这就是为什么该示例使用document.getElementById('degree')而不是{{{ 1}}。）

Answer 4

使用单词this

<form>
   <input type="range" value="0" name="angle" list="ranges" min="0" max="180" step="15" onchange="degree.value=this.value">
   <output id="degree">0°</output>
</form>

或getElementById

<form>
    <input type="range" value="0" name="angle" list="ranges" min="0" max="180" step="15" onchange="document.getElementById('degree').value = this.value">
    <output id="degree">0°</output>
</form>

输出值与html实体

4 个答案: