昨天晚上，我在一个特别大的代码库中四处游荡，偶然发现了我们平时使用的normalize.css文件用于重置HTML元素在不同浏览器中的样式。在这个过程中，我发现了一个名为<output>的特殊元素的样式，这是我以前从未见过的，甚至从未听说过的。
根据MDN上的相关描述，它代表计算或用户操作的结果，通常用于表单。让我感到尴尬的是，自从Chris在2011年在一篇文章中使用它之后，这并不是一个新的，花哨的附加功能。
先不管那么多！什么是output，我们又如何使用它？假设我们有一个range的input，然后我们添加一个output元素，并使用for将其与它的输入相关联。
<input type="range" name="quantity" id="quantity" min="0" max="100">
<output for="quantity"></output>
正如你看到的一样，并没做任何事情。默认情况下，output没有任何样式，也不会在浏览器中呈现任何东西。同样的，当我们改变input的输入值时，也什么都没有发生。
我们必须把所有东西和JavaScript绑在一起。首先，需要使用JavaScript找到DOM中的input，比如：
const rangeInput = document.querySelector('input');
现在我们可以将一个监听事件绑定到这个DOM元素上，这样的话，每当我们编辑该值时（通过向左或向右滑动），可以检测到change事件：
const rangeInput = document.querySelector('input');
rangeInput.addEventListener('change', function() {
console.log(this.value);
});
this.value总是指向input的range的值，因为我们在事件处理程序中使用它，然后我们可以将这个值返回到控制台，以确保能正常工作。然后，可以在DOM中找到output元素：
const rangeInput = document.querySelector('input');
const output = document.querySelector('output');
rangeInput.addEventListener('change', function() {
console.log(this.value);
});
然后我们编辑监听事件来设置output的值，这样一来，每当我们编辑input的值时，output的就会改变：
const rangeInput = document.querySelector('input');
const output = document.querySelector('output');
rangeInput.addEventListener('change', function() {
output.value = this.value;
});
现在在看看效果！不管怎么说，现在有效果了。一旦你改变了input的值，output的值就会输出来：
我们应该通过给output设置一个默认值，以便在加载页面时output可以立即可见。我们可以使用HTML本身，给output设置值：
<output for="quantity">50</output>
但我认为这并不是特别好的方案。当我们想要改变input的min或max的值时又会发生什么呢？我们也必须得改变我们的output。还是让JavaScript来设置output的状态，咱们通过一个新的函数setDefaultState来做这件事情：
function setDefaultState() {
output.value = rangeInput.value;
}
当DOM完成加载，然后触发这个函数：
document.addEventListener('DOMContentLoaded', function(){
setDefaultState();
});
现在我们可以添加样式了。但还有一件事，当你向左或向右滑动时，事件监听器的变化非常大，但它不会立即更新输出的值。幸运的是，有一种新型的事件监听器，它被称为input，而且得到众多浏览器的支持，我们现在可以使用它。下面是整个示例的所有代码：
const rangeInput = document.querySelector('input');
const output = document.querySelector('output');
function setDefaultState() {
output.value = rangeInput.value;
}
rangeInput.addEventListener('input', function() {
output.value = this.value;
});
document.addEventListener('DOMContentLoaded', function() {
setDefaultState();
});
这样我们就一个input和一个output。
本文根据@ROBIN RENDLE的《The Output Element》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:https://css-tricks.com/the-output-element/。
大漠
如需转载，烦请注明出处：https://www.w3cplus.com/html/the-output-element.html