如何使用 javascript（无 JQuery）动态更改 CSS class 的属性

Question

我正在尝试执行转换（减少或延长 DIV 的高度）。我想知道如何在通过更改 CSS class与使用 javascript 的元素关联的名称？

所以在下面的例子中，我想改变'的'height' 属性。 sboxopen' 从 130px 到 360px。然后通过更改元素的 class 名称来调用转换 -> Object.className = 'sboxopen';

CSS classes:

.sbox{
height: 0px;
transition: height 1s ease-out;
overflow: hidden;
}
.sboxopen{
height: 130px;
transition: height 1s ease-out;
overflow: hidden;
}

转换使用 JAVASCRIPT:

 Object.className = 'sbox';

或

 Object.className = 'sboxopen';

如果我无法更改 classes 的属性，我该如何使用 javascript 动态创建新的 CSS class 所以我可以为我想要的过渡合并所需的 'height' 属性吗？

Answer 1

我不知道是什么触发了你的动画，但假设它是每个 .sbox 元素上的 click。

由于您无法更改 CSS，您可以改为使用脚本使用 .style.height 添加内联样式高度。

这是一个片段：

var sboxes = document.querySelectorAll(".sbox");

sboxes.forEach(function(box, index){
  box.onclick = function(){
    box.style.height = "360px";
    box.className = 'sboxopen';
  }
})

.sbox {
  height: 0px;
  transition: height 1s ease-out;
  overflow: hidden;
  border: 8px solid gray; /* Added for better visibility */
}

.sboxopen {
  height: 130px;
  transition: height 1s ease-out;
  overflow: hidden;
  border: 8px solid gray; /* Added for better visibility */
}

<div class='sbox'>Box 1</div>
<br>
<div class='sbox'>Box 2</div>
<br>
<div class='sbox'>Box 3</div>

⋅ ⋅ ⋅

然后，我们可以想象使用自定义属性的自定义高度，对于每个 .sbox:

var sboxes = document.querySelectorAll(".sbox");

sboxes.forEach(function(box, index){
  box.onclick = function(){
    box.style.height = box.getAttribute('myHeight');
    box.className = 'sboxopen';
  }
})

.sbox {
  height: 0px;
  transition: height 1s ease-out;
  overflow: hidden;
  border: 8px solid gray; /* Added for better visibility */
}

.sboxopen {
  height: 130px;
  transition: height 1s ease-out;
  overflow: hidden;
  border: 8px solid gray; /* Added for better visibility */
}

<div class='sbox' myHeight='30px'>Box 1</div>
<br>
<div class='sbox' myHeight='60px'>Box 2</div>
<br>
<div class='sbox' myHeight='360px'>Box 3</div>

如有任何意见，请随时发表评论。

希望对您有所帮助。

如何使用 javascript（无 JQuery）动态更改 CSS class 的属性

How to change a property of a CSS class dynamically using javascript (no JQuery)

html

javascript

css

transition

如何使用 javascript（无 JQuery）动态更改 CSS class 的 属性

How to change a property of a CSS class dynamically using javascript (no JQuery)

html

javascript

css

transition

如何使用 javascript（无 JQuery）动态更改 CSS class 的属性