javascript - 按钮不响应 DOM cssStyleDeclaration

Question

我确信这是一个简单的错误，但我已经花了一个多小时试图找到问题所在，并且肯定可以使用不同的观点。

在下面的函数中，我改变了两个按钮的样式。其中之一正确响应，并且在调用该函数 (deleteBtnToDecorate) 时它的字体大小确实发生了变化。

---

另一个，我不明白为什么它没有响应并且字体大小没有改变(doneBtnToDecorate):

 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'
      }

我尝试过的事情:

• 控制台记录了点击两个按钮以验证它们是否全部目标正确。 他们是

• 手动更改 css 字体大小以验证 Bootstrap 是否可能问题(尽管如果是这样，另一个按钮就不会要么改变)但无论如何......事实是:它改变成功当我通过 CSS 而不是 DOM 时

这是我的完整代码:

 <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>

  </div>
</template>

<script>
export default {
    name: 'TodoList',
    methods: {
      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'
      }
    }
  }
</script>

<style lang="css">
.item-wrapper{
    padding: 4vh 3vh 4vh 3vh;
}
.item-list-ul{
  margin-right: 4vh;
}
.item-list-ul li{
  margin-bottom: 3vh;
} 
.item-list-ul li{
  font-size: 1.4em !important;
  font-weight: 600;
  list-style: outside none none;
}
.done-btn{
  margin-right: 20px;
  font-size: 1rem !important;
  font-weight: 600 !important;
}
.delete-btn{
  font-size: 0.9rem;
  font-weight: 600 !important;
}


</style>

Answer 1

您的 CSS 使用 !important:

.done-btn {
  ...
  font-size: 1rem !important;
  ...
}

如果您使用 !important，它将优先于内联样式。

顺便说一句，这并不是在 Vue 中执行此操作的正确方法。您应该通过 class 或 style 绑定(bind)在模板中应用更改，而不是直接获取元素并更改它们。