昨天晚上，我在一个特别大的代码库中四处游荡，偶然发现了我们平时使用的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/。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：https://www.w3cplus.com/html/the-output-element.htmlAir Max 95 - Fresh Mint