Ouput元素示例

ouput元素的介绍与相关Demo

MDN关于<output>的介绍

The HTML <output> element represents the result of a calculation or user action.

使用output元素有点类似使用label元素。

属性

  • for
    一个其它影响计算结果的标签ID列表
  • form
    与当前标签有关联的form(从属的表单)。该属性的值必须是当前文档内的表单元素的ID。如果未指明该属性,output标签必须是一个form的后代标签。该属性的用处在于可以让output标签脱离form标签,存在于一个网页文档的任意位置。
  • name
    元素的name属性

Demo 1

1
2
<input type="range" name="quantity" min="0" max="100">
<output for="quantity"></output>
1
2
3
4
5
6
7
const rangeInput = document.querySelector('input');
const output = document.querySelector('output');
function setDefaultState() {
output.value = rangeInput.value;
}
rangeInput.addEventListener('input', setDefaultState);
document.addEventListener('DOMContentLoaded', setDefaultState);

See the Pen input-output by yrq110 (@yrq110) on CodePen.

Demo 2

1
2
3
4
5
6
- var max = 10, min = 2, val = min;
.wrap(style=`--max: ${max}; --min: ${min}; --val: ${val}`)
input#r(type='range' min=min max=max value=val)
label(for='r') multiplier
output(for='r') #{val}
1
2
3
4
5
6
7
8
9
10
11
const _R = document.getElementById('r'),
_W = _R.parentNode,
_O = _W.querySelector('output');
function update() {
_W.style.setProperty('--val', +_R.value);
_O.textContent = +_R.value
}
_R.addEventListener('change', update, false);
_R.addEventListener('input', update, false);

See the Pen Simple slider by Ana Tudor (@thebabydino) on CodePen.

参考

文章目录
  1. 1. 属性
  2. 2. Demo 1
  3. 3. Demo 2
  4. 4. 参考
|