使用 document.querySelector('.').style。更改 div 的*两个* CSS 属性

Question

尝试设置一个截断的文本框，通过单击/点击文本框将其扩展为完整尺寸。我的 div.textbox有height:10em, ，并且使用（在此处找到- 请参阅淡出方式）overflow:hidden在文本框的底部三分之一处有一个“还有更多...”淡出效果。在 SO 上找到了一个用于扩展到. .textbox:after {height: 3em; background: linear-gradient}.textboxheight:auto

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

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

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

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

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

最后一点。 这里有两个解决方案......

Answer 1

您也只需设置其他属性即可。无论如何，直到浏览器重新呈现（JavaScript 事件处理程序返回后），更改才会生效；

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

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

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