用jQuery更改样式表href不太起作用 [英] Changing stylesheet href with jQuery doesn't quite work

问题描述

我正在创建一个供用户在现场访问的Web应用程序，因此他们希望能够根据环境照明将样式从浅色手动切换为深色.我正在使用jQuery.

I'm creating a web app that user will be accessing in the field, so they'd like to be able to manually toggle the styles from light to dark depending on the ambient lighting. I'm using jQuery.

我在样式表中添加了id属性，然后使用toggle()事件创建了一个按钮，在其中将href属性更改为所需的CSS文件.当我将样式分为几个文件以提高可维护性时，CSS文件具有多个@import指令.

I added an id attribute to my stylesheet, then created a button using the toggle() event, in which I change the href attribute to the CSS file I want. The CSS file has several @import directives as I split the styles into several files for maintainability.

我的问题是仅应用了主CSS文件.我尝试在@import指令中使用绝对路径，但是没有运气.

My problem is only the main CSS file is being applied. I tried using the absolute path in the @import directives, but no luck.

这里是否缺少修复程序，还是必须将所有内容都包含在一个CSS文件中?

Is there a fix here I'm missing, or do I have to inlcude everything in a single CSS file?

显然，这只是IE8中的问题，在Chrome和Firefox中可以正常工作.不幸的是，我的客户只想要 IE8.看起来这是此问题的副本.

Apprently this is only a problem in IE8, works fine in Chrome and Firefox. Unfortunately, my client wants only IE8. Looks like this is a duplicate of this question.

推荐答案

我确实在

I did indeed find the answer in this question, but I had to do a bit more to make it work for me. The toggle is performed on an IMG tag with the id ToggleStyle, so my jQuery code ended up thus:

$( "#ToggleStyle" ).toggle(
    function() {
        $( "link" ).last().remove();
        document.createStyleSheet( "styles/light/master.css" );
        $( this ).attr( "src", "images/light/style.png" );
    },
    function() {
        $( "link" ).last().remove();
        document.createStyleSheet( "styles/dark/master.css" );
        $( this ).attr( "src", "images/dark/style.png" );
    }
);

是对@dukebag的回应，是的，我的意思是将光线照射到监视器上，因为此应用程序将以24/7使用，并且他们希望在夜间使用低对比度主题.尽管我喜欢横向样式，但样式表已经完成，并且像大多数项目一样，时间决定了最快，更便宜的解决方案.

In response to @dukebag, yes, I meant light hitting the monitor, as this app will be used 24/7 and they wanted a low contrast theme for nighttime. While I like the transversal, the stylesheets are already complete and, like most projects, time dictates the quickest -- er, cheapest -- solution.

这篇关于用jQuery更改样式表href不太起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！