当前位置: 首页 > 面试题库 >

快速替换css文件(并将新样式应用于页面)

长孙绍辉
2023-03-14
问题内容

我有一个页面,该页面<link>的标题加载了名为的CSSlight.css。我还有一个名为的文件dark.css。我想要一个按钮来一起交换页面的样式(css文件中使用了40个选择器,而两个文件中有一些不匹配)。

如何删除light.css与JS的引用并删除所有已应用的样式,然后dark.css从中加载并应用所有样式?我不能简单地重置所有元素,因为某些样式是通过不同的CSS文件应用的,而某些样式是由JS动态生成的。是否有一种简单但有效的方法来执行此操作而无需重新加载页面?最好使用VanillaJS,但是无论如何我都会使用jQuery进行后续处理,因此jQ也很好。


问题答案:

您可以创建一个新链接,然后用新链接替换旧链接。如果将其放在函数中,则可以在需要的地方重复使用它。

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

HTML:

<html>
    <head>
        <title>Changing CSS</title>
        <link rel="stylesheet" type="text/css" href="positive.css"/>
    </head>
    <body>
        <a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a> 
        <a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a>
    </body>
</html>

为简单起见,我使用了内联javascript。在生产中,您需要使用不引人注目的事件侦听器。



 类似资料:
  • 问题内容: 我有一个现有的网站,上面有很多用表格布置的旧页面和表格,我正尝试逐步过渡到CSS。我想使用Twitter Bootstrap样式表-特别是表单样式- 但仅在我明确要求它们的页面部分中使用。例如,我可能将整个表单围绕在div中,如下所示: 我希望所有其他形式保持与现在相同,因为我将无法同时更改所有形式。有没有简单的方法可以做到这一点?我可以遍历Bootstrap CSS中的每种样式,并添

  • 问题内容: 我想将CSS文件应用于页面中的具体DIV。这是页面结构: 我试图应用CSS文件的规则来编辑它(CSS文件太大): 但是该解决方案不起作用。那么,我该怎么做呢? 问题答案: 您可以尝试: 等等,这就是您想要的吗?

  • 我有一个for循环,它导入目录中的所有Excel文件,并将它们合并到一个数据框中。但是,我想创建一个新列,其中每一行都采用Excel文件名的字符串。 这是我的导入和合并代码: 例如,如果第一个Excel文件名为file1.xlsx,我希望该文件中的所有行在(一个新列)中有值。如果第二个Excel文件名为file2.xlsx,我希望该文件中的所有行都具有值。请注意,Excel文件没有真正的模式,我只

  • 问题内容: 我刚刚在我的应用程序中创建了PDF文档,并且希望通过“文件”应用程序可以访问保存的文档的方式将文档保存在设备上。 当您在Safari中下载PDF文档时,可以选择将文档保存到“文件”应用中。 我用Google搜索了几个小时,但找不到任何有用的方法。 问题答案: 如果您有权访问,则可以向用户显示,然后将其保存到,或与其他任何可用选项共享该用户:

  • 问题内容: 我想申请到它是否有元素。 到目前为止,我已经将样式应用于元素(如果存在)。但我想的,如果有,仅使用。 以下是 该代码 问题答案: CSS3不可能。有一个建议的CSS4选择器,可以做到这一点,它看起来像这样(选择元素): 作为替代方案,使用jQuery,您可以利用的单行代码是这样的: 然后,您可以继续在CSS中设置样式。

  • 问题内容: 是否可以为元素定义CSS样式,仅在匹配的元素包含特定元素(作为直接子项)时才适用? 我认为最好用一个例子来解释。 注意 :我正在尝试设置 父元素的样式 ,具体取决于其包含的子元素。 注意2 :我知道我可以使用javascript来实现,但是我只是想知道是否可以使用一些(对我而言)未知的CSS功能。 问题答案: 据我所知,基于子元素设计父元素的样式不是CSS的可用功能。您可能需要为此编写