CODEWITHSUNDEEP
javascript
H4CKTRIK
H4CKTRIK

Reputation: 67

How to change the css stylesheet in CSS and JS?

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

Upvotes: 2

Views: 126

Answers (3)

Ram Saini
Ram Saini

Reputation: 64

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

Upvotes: 4

H4CKTRIK
H4CKTRIK

Reputation: 67

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')

Upvotes: 1

Md.Rafiul Islam Shohan
Md.Rafiul Islam Shohan

Reputation: 21

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

Upvotes: 2

Related Questions