javascript - 使用 document.querySelector ('.' ).style。改变一个 div 的 *两个* CSS 属性

Question

尝试设置一个 chop 的文本框，通过单击/点击文本框将其扩展为全尺寸。我的 div .textbox 有 height:10em，overflow:hidden，还有一个“还有更多...”的淡出效果文本框的底部三分之一使用 .textbox:after {height: 3em;背景:线性渐变(found here - 参见淡出方式)。在 SO 上找到一个用于将 .textbox 扩展为 height:auto 的脚本。

<script>
document.querySelector('.textbox').addEventListener('click', function() {
  document.querySelector('.textbox').style.height='auto';
});
</script>

问题是，.textbox:after 淡出效果仍然覆盖扩展文本框的底部 3em，遮挡了文本。因此，在单击/点击时，我需要脚本将 .textbox 的填充底部从 0 更改为 3em(以及将高度增加为自动)。上面的脚本可以处理这两个更改吗？我已经搜索过，但只找到更改单个属性的示例，例如颜色或边框(e.g. here)或使用 javascript 到 change multiple divs .我进行了修改，但结果要么是脚本不起作用，要么只影响 height: auto。

糟糕!抱歉，应用答案时在我的设置中发现了小错误。我在文本框中还有一个“关闭”按钮，如果单击该按钮，文本框会在关闭前快速展开。尝试给“关闭”按钮一个巨大的 z-index，但没有成功。所以我需要将查询选择器从整个文本框移动到文本的第一段 (p class="expand")。所以我想我会开始......

document.querySelector('.expand').addEventListener('click', function() {
  document.querySelector('.textbox').style.height='auto';

...但是 this.style.paddingBottom='2em'; 没有效果。我该怎么办？

最后的注释。 Two solutions here....

Answer 1

您也只需设置其他属性。在浏览器重新呈现之前(在您的 JavaScript 事件处理程序返回之后)，更改不会生效；

document.querySelector('.textbox').addEventListener('click', function() {
  this.style.height='auto';
  this.style.paddingBottom='3em';
});

请注意，您可以使用 this 来引用处理程序中的元素，无需再次查找它。

---

但是，我建议为此定义一个类，然后根据需要添加/删除它，而不是使用直接样式属性。