使用 document.querySelector('.').style.更改 div 的 *两个 * CSS 属性 [英] Using document.querySelector('.').style. to change *two* CSS properties of a div

问题描述

尝试设置一个截断的文本框，该文本框通过单击/点击文本框展开至全尺寸.我的 div .textbox 有 height:10em, overflow:hidden，并且有一个还有更多..."的淡出效果文本框的底部三分之一使用 .textbox:after {height: 3em;背景:线性渐变}(在这里找到 - 见淡出方式).在 SO 上找到了一个用于将 .textbox 扩展到 height:auto 的脚本.

Trying to set up a truncated textbox that expands to fullsize with a click/tap on the textbox. My div .textbox has height:10em, overflow:hidden, and there's a "there is more..." fade-out effect over the bottom third of the textbox using .textbox:after {height: 3em; background: linear-gradient} (found here - see Fade Out Way). Found on SO a script for expanding .textbox to height:auto.

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

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

Problem is, the .textbox:after fade-out effect still covers the bottom 3em of the expanded textbox, obscuring the text. So, on click/tap, I need the script to change the padding-bottom of .textbox from 0 to 3em (as well as increase height to auto). Can the script above handle those two changes? I've searched and only find examples for changing a single property, like color or border (e.g. here) or using javascript to change multiple divs. I've tinkered, but the results are either the script doesn't work or it only effects height: auto.

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

Oops! Sorry, Little bug found in my setup when applying the answer. I also have a "Close" button within the textbox and if I click that, the textbox expands for a flash before closing. Tried giving the "Close" button a huge z-index, but no luck. So I need to move the queryselector from the entire textbox to the first paragraph (p class="expand") of text. So I guess I'd start with...

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

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

...but the this.style.paddingBottom='2em'; has no effect. What do I do?

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

推荐答案

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

You just set the other property as well. The changes don't take effect until the browser re-renders anyway (after your JavaScript event handler has returned);

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

注意，你可以使用this来引用处理程序中的元素，不需要再去找.

Notice that you can use this to refer to the element within the handler, no need to go find it again.

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

However, I would recommend defining a class for this and then adding/removing it as necessary, rather than using direct style properties.

这篇关于使用 document.querySelector('.').style.更改 div 的 *两个 * CSS 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！