如何通过 javascript 更改 `link` 中的 `href`

Question

我想用我的 css 更改 link 标签上的 target。我想用 javascript 来做到这一点。它应该是当我点击按钮时。我有 html 个文件

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <link rel="stylesheet" href="css/general.css">
    <link id="my_css" rel="stylesheet" href="css/normal_mode.css">


</head>
<body id="my_body">
...

我有javascript个文件

function dark_mode() 
    {
        if(document.getElementById("my_css").href == "css/normal_mode.css")
        {
            document.getElementById("my_body").className = ""; 
            document.getElementById("my_name").className = "";
            document.getElementById("my_css").href = "new.css";
...

Answer 1

您的方法不正确或不实用。您需要做的是为两个主题加载 CSS 并更改正文主题数据或 class.

.theme-dark {
  --bg: black;
  --text: white;
}

.theme-light {
    --bg: white;
    --text: black;
}

在 JS 中

document.querySelector(".switch-theme").addEventListener("click", () => {
   document.body.classList.toggle("theme-dark");
   document.body.classList.toggle("theme-light");
})

如何通过 javascript 更改 `link` 中的 `href`

how to change `href` in `link` by javascript

html

javascript

css

href