通过 onclick .js 更改 <link href="">

Question

我想通过点击图标更改网站的风格

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styled.css" id="styles">
</head>

我很难进入href。目前我写了这个脚本：

<script>
    function changeTheme(){
    document.querySelector("link[href='styled.css']").href = "style.css";
    }            
</script>

但它只能以一种方式工作，我想要这样的东西：（第一次点击）styled.css -> style.css （第二次单击）style.css -> styled.css。感觉自己启动这个功能不好，所以求助。有效的脚本应该是什么样的？

Answer 1

使用 if-else:

function changeTheme() {
  const link = document.getElementById('styles');
  if (link.href.includes('d')) {
    link.href = 'style.css';
  } else {
    link.href = 'styled.css';
  }
}

通过 onclick .js 更改 <link href="">

Change <link href=""> by onclick .js

html

javascript

onclick

href

hyperlink