如何更改 CSS 和 JS 中的 css 样式表？

Question

function colorChanger() {
  var len = document.getElementById("string").value.length;
  if (len < 50) {
    style1.onclick = swapStyleSheet("first_50.css");
  } else if (len > 50 && len < 100) {
    style1.onclick = swapStyleSheet("second_100.css");
  }
}
function swapStyleSheet(sheet){
    document.getElementById('css_style').setAttribute('href', sheet);
}

这是我的代码，如果字符数less than 50且more than 50 and less than 100 ，我希望它更改样式表

我的代码不起作用

Answer 1

这是我的代码，它正在更改样式表。

<html>

<head>
    <title>
        Change Css
    </title>
    <script lang="javascript">
        function colorChanger() {
            var len = document.getElementById("string").value.length;
            if (len < 50) {
                swapStyleSheet("first_50.css");
            } else if (len > 50 && len < 100) {
                swapStyleSheet("second_100.css");
            }
        }

        function swapStyleSheet(strName) {
            document.getElementById("cssChanger").href = strName;
        }
    </script>
    <link href="first_50.css" id="cssChanger" />
</head>

<body>
    <input type="text" id="string" value=""></input>
    <input type="button" id='style1' value="Change Css" onclick="javascritpt:colorChanger();">
</body>

</html> ````

Answer 2

function changeCSS(cssFile, cssLinkIndex) {

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

    var newlink = document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", cssFile);

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}

function colorChanger() {
var len = document.getElementById("string").value.length;
  if (len < 50) {
    changeCSS("first_50.css",index); // index is head tag child element index ex:0
  } else if (len > 50 && len < 100) {
    changeCSS("second_100.css",index);// index is head tag child element index ex:0
  }
}

Answer 3

好的，我已经弄清楚了，我不需要交换整个样式表，因此必须将 css 重新加载到 DOM 中。我可以使用 element.classList.remove('good-tier')

如何更改 CSS 和 JS 中的 css 样式表？

问题描述

3 个解决方案

解决方案1
4 已采纳 2020-12-02 07:11:36

解决方案2
2 2020-12-02 06:37:55

解决方案3
1 2020-12-02 07:09:48

如何更改 CSS 和 JS 中的 css 样式表？

问题描述

3 个解决方案

解决方案1 4 已采纳 2020-12-02 07:11:36

解决方案2 2 2020-12-02 06:37:55

解决方案3 1 2020-12-02 07:09:48

解决方案1
4 已采纳 2020-12-02 07:11:36

解决方案2
2 2020-12-02 06:37:55

解决方案3
1 2020-12-02 07:09:48