0
196
ViewsTransición en altura usando javascript style.height
Para manipular la propiedad de altura, entonces uso javascript, no jquery, entonces tengo un problema.
El problema es que no puedo volver a anular la altura a cero una vez que he establecido la altura de desplazamiento del elemento.
Aquí está mi código js:
let isClosed = true; var cals = document.getElementsByClassName('h-strench-box'); for (var i = 0; i < cals.length; i ++) { cals[i].addEventListener('click', function(e) { if (isClosed) { this.classList.add('h-strench-box-out'); var content = this.querySelector('.h-strench-content'); content.style.height = content.scrollHeight + 'px'; isClosed = false; } else { if (this.classList.contains('h-strench-box-out')) { this.classList.remove('h-strench-box-out'); // this.querySelector('.h-strench-content').style.height = '0'; // This not working isClosed = true; } else { for (var j = 0; j < cals.length; j ++) { cals[j].classList.remove('h-strench-box-out'); cals[j].querySelector('.h-strench-content').style.height = '0'; // This not working } this.classList.add('h-strench-box-out'); var content = this.querySelector('.h-strench-content'); content.style.height = content.scrollHeight + 'px'; } } }); }CSS
.h-strench-content { height: 0; padding: 0; display: none; overflow: hidden; transition: height 0.4s ease-in; } .h-strench-box-out .h-strench-content { display: block; } .h-strench-btn { transition: transform 0.3s ease-out; } .h-strench-btn::before { content: '\f13a'; font-family: "Font Awesome 5 Free"; font-size: 27px; font-weight: 600; } Una pregunta más. ¿Cómo puedo cambiar el valor de altura (B) no element.style (A)? Por favor compare la imagen de abajo. Por favor ayuda gracias!
1 answers
Answer question0
Primer paso: asegúrese de que sus llamadas a querySelector devuelvan los elementos correctos. Siempre devolverá el primer elemento que coincida con el selector.
En cuanto al css: la altura A es css en línea, lo que significa que siempre tendrá prioridad sobre la altura B a menos que la altura B esté marcada como !important . Para volver a la altura B, la altura A debe eliminarse por completo a través de la propiedad de eliminación o simplemente establecerse en nulo.
var obj = document.getElementById('name'); obj.style.removeProperty('height'); // if you want to return the old value... // var oldValue = obj.style.removeProperty('height');Si desea cambiar el contenido de una hoja de estilo, consulte este ejemplo:
var declaration = document.styleSheets[0].rules[0].style; var oldValue = declaration.removeProperty('height');... Sin embargo, tenga cuidado con el ejemplo de la hoja de estilo, ya que un cambio de índices puede arruinar esto. Sería mucho más seguro encontrar una alternativa que agregue/elimine clases con los valores que desea.