通过Jquery .append（）调用CSS文件，然后通过单击同一元素将其删除

Question

我有一个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）不起作用：

// 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-family，而只是添加具有更改的另一个CSS（就像我们为添加自定义样式表一样） IEs）会容易得多。

有人可以帮助我并更正我糟糕的代码吗？

Answer 1

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

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

演示

Answer 2

最简单的办法可能是使用addClass与removeClass结合在身上的标签与将改变根据人体类的字体CSS规则。 删除链接标签可能不会撤消字体更改

简化的CSS示例

div { font-family: arial}
.dislexia div { font-family: verdana}

JS

$(".skip-link-diszlexia").click(function(){  
    $('body').addClass('dislexia');

 })