0

Esta operación de cambiar los estilos inexplicablemente me cambia el estilo del botón "Borrar" pero no del "Hecho!". Ambos están bien localizados porque si hago console.log de cada uno de ellos me aparecen bien en las devtools de chrome

 changeStyle: function(idNumber){
        const liToDecorate = document.getElementById(`id${idNumber}`)
        const doneBtnToDecorate = document.getElementById(`idDone${idNumber}`)
        const deleteBtnToDecorate = document.getElementById(`idDelete${idNumber}`)
      
        liToDecorate.style.textDecoration = 'line-through'
        doneBtnToDecorate.style.fontSize = '0.8rem'
        deleteBtnToDecorate.style.fontSize = '1.1rem'
      }

La app está en vue pero como digo veo innecesario poner todo el codigo ya que si clicko en ambos botones me localiza bien todos. No hay ningun error en este sentido

 <ul class="item-list-ul">
        <li 
          v-for="(i, index) in items" 
          :id="`id${index}`" 
          :key="index">{{ i }}
          <div class="item-butons">
            <b-button :id="`idDone${index}`" class="done-btn" @click="changeStyle(index)" size="sm" variant="outline-dark">Hecho!</b-button>
            <b-button :id="`idDelete${index}`" class="delete-btn" @click="deleteItem(i)" size="sm"  variant="warning">Borrar</b-button>
          </div>
        </li>
      </ul>

Luego si es verdad que los estilos cabría la duda de que CSS sobreescribiese lo que hace el DOM antes (no estoy seguro si una app SPA renderizaría un cambio como este sin actualizar la página y entonces permitiría que CSS aplicase otra vez el estilo "antiguo"). Pero de igual modo tampoco esta duda podría ser porque sino el estilo de "Borrar" tampoco cambiaría y si que lo hace como he dicho.

.done-btn{
  margin-right: 20px;
  font-size: 1rem !important;
  font-weight: 600 !important;
}
.delete-btn{
  font-size: 0.9rem;
  font-weight: 600 !important;
}

He probado a cambiar manualmente el estilo en CSS en caso de que Bootstrap estuviese haciendo algun conflicto y tampoco hay problema ahí. Me reduce exitosamente el tamaño del botón "Hecho!" si lo hago manulmente con CSS. Si lo hago Javascript no.

Alguna idea por favor?

1
  • 1
    Podrías realizar directo en la clase anteponiendo : al atributo class, de la siguiente manera :class="tuPropiedadValidar == true ? 'tuClaseValida' : 'tuClaseInvalida'"
    – Lud Osorio
    el 15 oct. 2019 a las 18:45

1 respuesta 1

0

Al final el error era el siguiente:

.done-btn{
  margin-right: 20px;
  // declaro important:
  font-size: 1rem !important;
  font-weight: 600 !important;
}
.delete-btn{
  // no declaro important:
  font-size: 0.9rem;
  font-weight: 600 !important;
}

Se me pasó quitarle el !important a .done-btn . De todas formas usar el DOM no es lo más adecuado en este caso y recomendaría que si te encuentras con este problema y estas usando un enfoque similar al mío, te plantees mejor usar las directivas :class y :style de Vue.js.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.