Question

我有这个代码，在点击两个按钮之一后切换2个不同的外部.css并且它工作正常，但是我需要更改它并且只需要在这两个.css文件之间切换一个按钮。谢谢

<script type="text/javascript">

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

<a href="#" onclick="changeCSS('css/main.css', 1);">STYLE 1</a>
<a href="#" onclick="changeCSS('css/main2.css', 1);">STYLE 2</a>
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

Answer 1

var cssFiles = ['css/main.css', 'css/main2.css'];
var currentFile = 0;

function changeCSS(cssLinkIndex) {

    if(currentFile + 1 < cssFiles.length) currentFile++;
    else currentFile = 0;

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

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

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

然后您可以这样称呼：

<a href="#" onclick="changeCSS(1);">CHANGE STYLE</a>

它只是维护一个计数器，每次单击该按钮时，该计数器都会递增，指向包含样式表名称的数组的不同索引。如果计数器达到最大值，它将回绕到0并重新开始。

Answer 2

要做到这一点，你需要一个标志，这将使你能够区分当前加载的样式。例如，您可以在按钮上添加一些类，并且基于此类，您将加载不同的样式。每次单击时，您都必须更新该标志以使实际状态保持最新。

Answer 3

你可以这样做：

<script type="text/javascript">

    var cssFile = "css/main.css";

    function changeCSS(cssLinkIndex) {

    if (cssFile == "css/main.css")
        cssFile = "css/main2.css";
    else
        cssFile = "css/main.css";

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

<a href="#" onclick="changeCSS(1);">STYLE 1</a>
<a href="#" onclick="changeCSS(1);">STYLE 2</a>
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

Answer 4

这样的事情会起作用：

<script type="text/javascript">

var CSSToggle = false;

function changeCSS(cssLinkIndex) {

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

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

    If(CSSToggle){
        cssFile = "main.css";
    } else {
        cssFile = "main2.css";
    }

    newlink.setAttribute("href", cssFile);

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}
</script>

<a href="#" onclick="changeCSS(1);">Toggle styles</a>
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

但是，有更简洁的方法来切换CSS文件。例如，您可以使用单个CSS文件，如下所示：

body.styles1 div.box { //styles here }
body.styles2 div.box { //styles here }

然后，当您想要切换时，将body类更改为styles1或styles2。更少的HTTP请求（尽管它会使CSS稍微膨胀）和更少的DOM操作。

将两个按钮更改为一个（切换）

4 个答案: