Javascript 使用document.querySelector（'；'；）.style。更改div的*two*CSS属性的步骤

尝试设置一个截断的文本框，通过单击/点击该文本框可将其扩展为完整大小。我的div

.textbox

具有

高度：10em

，

溢出：隐藏

，并且使用

在文本框的底部三分之一处具有“还有更多…”淡出效果。textbox:after{height:3em；背景：线性渐变}

（.参见淡出方式）。在SO上找到一个脚本，用于将

.textbox

扩展到

高度：auto

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

…但是

这个.style.paddingBottom='2em'无效。我该怎么办

最后一点。
您也可以设置其他属性。在浏览器重新呈现之前（JavaScript事件处理程序返回后），更改不会生效

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


但是，我建议您为此定义一个类，然后根据需要添加/删除它，而不是使用直接样式属性。
您正在寻找类似的内容吗

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


const textbox=document.querySelector（'.textbox'）；
textbox.addEventListener（'click'，function（）{
textbox.style.height='auto'；
textbox.style.paddingBottom='3em'；
});
抱歉，回答正确，但出现了新问题（我的错）。请参阅帖子。@plugincontainer-您将希望将其作为新问题发布，因为这是一个新问题。请确保在其中包含一个，理想情况下是一个使用堆栈片段（
[]
工具栏按钮；）的可运行的。问题仍然是关于“使用document.querySelector（'.'）.style.更改div的两个CSS属性”。我所做的唯一更改是document.querySelector现在是（'.expand'），而不是（'.textbox'）。因此，如果您能给我更改.textbox div的两个CSS属性的完整语法——而不使用“this”（我假设这是一个可选的快捷方式，因为您写了“您可以使用它引用处理程序中的元素，无需再次查找它”——我能得到原始问题（和新问题）的答案吗？@plugincontainer-不，你不会。你所说的闪烁与这个问题完全不同。（如果出于某种原因你不想使用
这个
，你只需要将元素引用保存在一个变量中：
var el=document.querySelector（“.textbox”）；el.style.height=…；el.style.paddingBottom=…；
但请注意，如果您更改页面，添加或删除
.textbox
元素，则在处理程序运行时可能会选择其他元素。这是使用
此
的原因）对我来说，闪烁从来都不是一个问题——我想通过使用文本框的第一个段落（而不是整个文本框）来解决它。第一个段落超出了关闭按钮的范围。我对javascript语法的知识有限，因此如果你能拼出（通过编辑你的答案）答案的完整语法我将不胜感激。感谢，因为这将节省我花在el上的大量时间=谢谢米格尔，你的答案也可以，但我的问题被文本框“关闭”按钮的问题所取代（请参阅问题的更改）
document.querySelector('.textbox').addEventListener('click', function() {
  this.style.height='auto';
  this.style.paddingBottom='3em';
});

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