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?