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

标签 javascript html css

我尝试获取元素并根据内容更改样式:如果元素内容是 English 那么 CSS 应该是 ltr.css else if 元素内容是 Persian CSS 应该是 '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" />

这是整个应用程序

最佳答案

使用 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>

关于javascript - 如何通过 javascript 更改样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58568821/

相关文章:

javascript - 如何在javascript中将元素从一个数组复制到另一个数组?

html - 修复了 IE 中带有 CSS 样式问题的标题表

html - 显示为 : block properties, 的表我想将行宽创建为 100%,但不起作用

javascript - 在 Firefox 中检测可滚动 div 何时为 "focused"?

html - 在 2 列布局中强制 Bootstrap col 低于其他列

html - 垂直对齐 td 中可变高度的 Font Awesome 图标

javascript - 将数字四舍五入到最接近的小数点 0.5

javascript - 我无法调试此导航栏子导航幻灯片

javascript - 正则表达式不能很好地捕获组

Javascript:将多个元素创建到 `for` 循环中