Question

我是新手，我想知道，不是像在这里这样在两行中分别编写，我可以将innerHTML和style属性合并到一行吗？还是有一种更简洁的编写方式？

我知道这是一个糟糕的例子，永远不会实际使用，我只是想弄清楚是否有一种方法可以将innerHTML和style（或任何函数）组合成一个行而不是两个document.getElementById。

function myFunction() {
  document.getElementById('test').innerHTML = 'Show this text';
  document.getElementById('test').style = 'display:block';
}

#test {
  display: none;
}

<p id="test"></p>
<button onclick="myFunction()">Click me</button>

Answer 1

您基本上做对了，但是您只能拨打一次document.getElementById：

const testElement = document.getElementById('test');
testElement.innerHTML='Show this text';
testElement.style.display = 'block';

Answer 2

您可以将元素的返回值作为

ele = document.getElementById('test')

然后

ele.innerHTML='Show this text';
ele.style='display:block';

但是关于您的问题，不，不是没有重新创建我所知道的元素

Answer 3

您可以通过将getElementById的结果存储在变量中并使用hidden属性（browser support来对其进行清理（对于不支持的浏览器可能存在polyfill它）：

<script>
function myFunction() {
    const test = document.getElementById('test');
    test.textContent = 'Show this text';
    test.hidden = false;
}
</script>

<p id="test" hidden></p>

<button onclick="myFunction()">Click me</button>

有没有办法为这个简单的任务组合功能？

3 个答案: