VueJS 添加/刪除 class 到標簽
[英]VueJS add/remove class to <html> tag
問題描述
我現在正致力於在 VueJS 中創建主題。 我有一個 theme.less 文件，它在更改<html>標記 class 后執行 function。 我希望能夠根據下拉列表中的選定選項以編程方式交換主題。 當下拉菜單設置為“深色”時，我希望將 .dark class 添加到我的<html>標記中。 到目前為止，我還沒有找到從 VueJS 操作根<html>標記的方法。 是否可以在不向項目添加 JQuery 的情況下從此標簽中添加和刪除類？
1 個解決方案
解決方案1
1 2021-02-06 21:43:55
是否可以在不向項目添加 JQuery 的情況下從此標簽中添加和刪除類？
您可以使用純 JavaScript。
document.documentElement.classList.add("MyClass");
document.documentElement.classList.remove("MyClass");
或者
document.querySelector('html').classList.add("MyClass");
document.querySelector('html').classList.remove("MyClass");
如果你想用 body 代替 html 標簽：
document.body.classList.add("MyClass");
document.body.classList.remove("MyClass");
或者
document.querySelector('body').classList.add("MyClass");
document.querySelector('body').classList.remove("MyClass");
這在 VueJS 中是可以接受的唯一原因是因為 HTML 和 BODY 標簽在 VueJS 的模板之外，因此不會與框架沖突。
在 VueJs 中滾動添加/刪除類
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.