如何在不洗掉“i”標簽的情況下使上面的代碼更改跨度文本?
function toggle(e) {
let txt = e.innerText;
e.innerText = txt == 'Modo escuro' ? 'Modo claro' : 'Modo escuro';
}
<a onclick="toggle(this)" id="theme-toggle" href="#" class="nav__link" >
<i class='bx bx-bulb nav__icon' ></i>
<span class="nav__name">Modo escuro</span>
</a>
現場演示:https ://pauletatv.netlify.app
uj5u.com熱心網友回復:
包括它
只需將您的標簽添加到您的.innerHTML元素中。
let modo = 0;
function toggle(e) {
if (modo == 0) {
e.innerHTML = "<i class='bx bx-bulb nav__icon' ></i><span class='nav__name'>Modo claro</span>";
modo = 1;
} else {
e.innerHTML = "<i class='bx bx-bulb nav__icon' ></i><span class='nav__name'>Modo escuro</span>";
modo = 0;
}
}
<a onclick="toggle(this)" id="theme-toggle" href="#" class="nav__link" >Click</a>
或者
您可以通過以下方式檢查用戶主題偏好 cookie:
let modo = 0;
if (document.cookie.indexOf("theme=1") !== -1) {
modo = 1;
}
function toggle(e) {
if (modo == 0) {
e.innerHTML = "<i class='bx bx-bulb nav__icon' ></i><span class='nav__name'>Modo claro</span>";
modo = 1;
} else {
e.innerHTML = "<i class='bx bx-bulb nav__icon' ></i><span class='nav__name'>Modo escuro</span>";
modo = 0;
}
}
<a onclick="toggle(this)" id="theme-toggle" href="#" class="nav__link" >Click</a>
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/525154.html
上一篇:JavaScript-從googlesheet傳遞的資料僅顯示第一列而不是整個資料
下一篇:如何讓圖表js實時顯示數值?
