通过Jquery .append()调用CSS文件，然后通过单击同一元素将其删除 [英] Call a CSS file by Jquery .append(), and delete this by second click on the same element

问题描述

我有一个HTML链接:

I have a link in HTML:

<li class="skip-link-diszlexia"><a class="assistive-text" href="#" title="Diszlexia barát nézet">Diszlexia barát nézet</a></li>

我想通过Jquery javascript调用另一个CSS，这将更改某些div和段落上的字体系列和样式，并在第二次单击同一元素后，返回到开始.我根本不是Java语言程序员，我阅读了Jquery文档并创建了它.它将diszlexia.css文件与默认的style.css结合在一起没有问题，但是第二次单击(我想从使用中删除diszlexia.css)不起作用:

I want to call an another CSS by Jquery javascript, which is change the font-family and style on some divs and paragraphs, and after the second click on the same element, return back to start. I'm not a Javascript programmer at all, I read the Jquery documentation and created this. It's combine the diszlexia.css file with the default style.css without problem, but the second click (which I want to delete the diszlexia.css from usage) not working:

// Jquery CSS switcher (Diszlexia barát nézet)
$(document).ready(function() {
    $(".skip-link-diszlexia").click(function(){
        $(this).append('<link rel="stylesheet" type="text/css" media="all" href="css/diszlexia.css" />');
        return false;
        $(this).append('<link rel="stylesheet" type="text/css" media="all" href="css/diszlexia.css" />').remove();
        return false;
    });
});

我不想使用.addClass()，.removeClass()或.css()，因为我需要在许多元素上更改fonf系列，而只是添加具有更改的另一个CSS(就像我们添加IE的自定义样式表)会容易得多.

I not want to use .addClass(), .removeClass() or .css(), because I need to change the fonf-family on many element and just to add an another CSS with the changes (just like we adding custom stylesheets for IEs) would be much easier.

有人可以帮助我并纠正我糟糕的代码吗?

Someone can help me and correct my crappy code?

推荐答案

我想您需要在每次点击中切换该引用.表示如果应用了它，则将其删除；如果删除后再应用它，则应尝试以下操作:

I guess you need to toggle that reference in each click. mean if its applied remove it and if removed than apply it thus you should try this :

$(document).ready(function() {
    $(".skip-link-diszlexia").click(function(){
        if($(this).find("link").length <= 0)
            $(this).append('<link rel="stylesheet" type="text/css" media="all" href="css/diszlexia.css" />');
        else
            $(this).find("link").remove();
    });
});

演示

DEMO

这篇关于通过Jquery .append()调用CSS文件，然后通过单击同一元素将其删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！