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 stackoverflow.com/questions/47736997/… — Coenie Richards
– Coenie Richards, Commented Dec 2, 2020 at 6:26
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
– KcH, Commented Dec 2, 2020 at 6:36
@Codenewbie I'm using 2 style sheets: first_50.css second_100.css — H4CKTRIK
– H4CKTRIK, Commented Dec 2, 2020 at 6:43
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
– H4CKTRIK, Commented Dec 2, 2020 at 7:08

Ram Saini · Accepted Answer · 2020-12-02 08:44:28Z

4

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

edited Dec 2, 2020 at 8:44

answered Dec 2, 2020 at 7:11

Ram Saini

645 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Md.Rafiul Islam Shohan · Accepted Answer · 2020-12-02 06:37:55Z

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

answered Dec 2, 2020 at 6:37

Md.Rafiul Islam Shohan

211 silver badge3 bronze badges

Comments

H4CKTRIK · Accepted Answer · 2020-12-02 07:09:48Z

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 2, 2020 at 7:09

H4CKTRIK

671 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to change the css stylesheet in CSS and JS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related