我尝试获取元素并根据内容更改样式:如果元素内容是 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/