Question

我想同时更改css和主页

index.html和sub.html看起来几乎相同，但是sub.html没有“a” - 链接的标签，只有一个后退和前进btn。
我知道如果我改变html，新标题应该在“head”-Tag中包含正确的CSS 也许我需要一个全局变量但我不知道如何在javascript中使用它。

此示例只有nr01到nr03 ...最终文档在开始时最多有20个，后来更多......我不希望将来更改所有文档，因为项目数量会发生变化。这就是我选择这种方式的原因。

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8"/>
    <link type="text/css" rel="stylesheet" href="CSS/style.css" />
    <link type="text/css" rel="stylesheet" href="CSS/nr00.css" />
    <script type="text/javascript" src="JS/loadcss.js"></script>
</head>
<body>
    <div class="content">
        <div class="item nr01"><a href="javascript:othercss('css/nr01.css')" onclick="href='sub.html';">a</a></div>
        <div class="item nr02"><a href="sub.html" onclick="othercss('css/nr02.css');return false;">b</a></div>
        <div class="item nr03"><a href="sub.html" onclick="javascript:othercss('css/nr03.css')">c</a></div>
    </div>
</body>

JS文件

//JavaScript Document
function othercss(dat)      
        {setTimeout(function(){document.getElementsByTagName('link')[1].href=dat}, 200);alert ('here load the html?');}

第一个链接显示了sub.html但未加载javascript。

第二次加载了javascript并更改了css，但没有加载sub.html

第三个链接加载了javascript并加载了sub.html但没有更改css。

我可以先加载sub.html，然后让函数更改css文件吗？

Answer 1

我可以先加载sub.html，然后让函数更改 css文件？

是的，在这种情况下你应该。

之前没有工作的原因是您在加载新页面之前尝试更改样式表，并且您只会在当前页面上看到更改。除非你做一些额外的工作，否则你不会在下一页看到样式表。

在此示例中，每个链接都指定一个主题，以便在页面加载时它将动态替换第二个样式表。

有很多方法可以改进，但我保持它非常简单，用于演示目的。

在HTML文件中执行此操作：

添加触发load()

onload

为每个theme

添加href参数

<body onload="load();">
   <div class="content">
        <div class="item nr01"><a href="sub.html?theme=nr01">a</a></div>
        <div class="item nr02"><a href="sub.html?theme=nr02">b</a></div>
        <div class="item nr03"><a href="sub.html?theme=nr03">c</a></div>
    </div>

在.js文件中执行此操作：

定义使用load()参数更改加载时的css的theme函数

这预计页面上至少会有2个link标记，并会根据指定的theme盲目地替换第二个样式表网址。假设nr00是您的默认样式表，是第二个link

 function load()    {
     var theme = getUrlParam("theme");
     othercss("CSS/" + theme + ".css");
 }

 function othercss(dat)      
 {
     var link = document.getElementsByTagName('link')[1];
     link.disabled = true;
     link.href = dat;
     link.disabled = false;
 }

 // getUrlParam
 // borrowed from: http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
 function getUrlParam(name) {
     name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
     var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
         results = regex.exec(location.search);
     return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
 }

如何同时更改css和html文件

1 个答案: