时间戳

首页 > 解决方案 > 如何通过 javascript 更改样式表

javascript - 如何通过 javascript 更改样式表

问题描述

我尝试获取元素并按内容更改样式：如果元素内容是English那么 CSS 应该是ltr.css else if元素内容是PersianCSS 应该是“rtl.css”这就是我所拥有的

    addEventListener("DOMContentLoaded", () => {
        
        var lang = document.getElementById('languageChooser').innerHTML;

        if(lang == 'Persian'){
            document.querySelector('#style1').setAttribute('href', 'rtl.css');;
        } else if (lang == 'English') {
            document.querySelector('#style1').setAttribute('href', 'ltr.css');;
        }
    })
 	<a href="" id="languageChooser">Persian</a>
  <link id="style1" rel="stylesheet" type="text/css" href="ltr.css" />

这是整个应用程序

标签： javascripthtmlcss

解决方案

使用 jquery 你绝对可以交换 css 文件。在按钮单击时执行此操作。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link id="style1" rel="stylesheet" type="text/css" href="ltr.css" />
</head>

<body>
    <a href="#" id="languageChooser">Persian</a>
</body>
<script type="text/javascript">
    $("#languageChooser").click(function() {
        var lang = document.getElementById('languageChooser').innerHTML;
        var selector = $('link[href*="ltr.css"]');
        if (lang == 'Persian') {
            selector.replaceWith('<link href="rtl.css" type="text/css" rel="stylesheet">');
        }
    });
</script>
</html>

推荐阅读