How to change the css stylesheet in CSS and JS?

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);
}

This is my code, I want it to change style sheet if the character count is less than 50 and more than 50 and less than 100

My code is not working

Is the function "swapStyleSheet" one of your functions? Perhaps this question and answer is similar to what you need https://stackoverflow.com/questions/47736997/swap-style-sheet-with-localstorage — Coenie Richards, Dec 02 '20 at 06:26
https://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript You can check this also, you just have to load css in your head dynamically based on condition. — Swaraj Gandhi, Dec 02 '20 at 06:31
@CoenieRichards i'm talking about the `if` and `else if` statement, they are not swapping the stylesheet — H4CKTRIK, Dec 02 '20 at 06:32
i guess its not his question @firatozcevahir ... and H4CKTRIX please be clear what is not working and add complete code when posting for a better understanding — KcH, Dec 02 '20 at 06:36
@H4CKTRIK your if statements work only if len is less than 50 and more than 50. So if the len equals 50, it wont evaluate — firatozcevahir, Dec 02 '20 at 06:36
Here: https://codepen.io/5kyw41k3r/pen/QWKjEZj The `len` means length of the input — H4CKTRIK, Dec 02 '20 at 06:39
May i know how many style sheets are used in your current html file ... is that only one style sheet or many ? — KcH, Dec 02 '20 at 06:41
@Codenewbie I'm using 2 style sheets: `first_50.css` `second_100.css` — H4CKTRIK, Dec 02 '20 at 06:43
so based on length condition you need to change style sheets from one to other ... correct ? — KcH, Dec 02 '20 at 06:44
what you are trrying to change in both of css ... to just check if it is necessary to change the style sheets — KcH, Dec 02 '20 at 07:02
Ok @Codenewbie, I've figured it out, I dont need to swap whole stylesheets, thus having to reload the css into the DOM.I can just use element.classList.remove('good-tier') — H4CKTRIK, Dec 02 '20 at 07:08

Ram Saini · Accepted Answer · 2020-12-02T08:44:28.263

This is my code it is changing the stylesheet.

<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> ````

score 2 · Answer 2 · answered Dec 02 '20 at 06:37

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
  }
}

score 1 · Answer 3 · answered Dec 02 '20 at 07:09

1

Ok I've figured it out, I dont need to swap whole stylesheets, thus having to reload the css into the DOM.I can just use element.classList.remove('good-tier')

answered Dec 02 '20 at 07:09

H4CKTRIK

67
7

How to change the css stylesheet in CSS and JS?

3 Answers3