[英]How can you change the attached CSS file with Javascript?
我想知道,是否可以使用JavaScript更改附加的樣式表?
例如:
<link href="stylesheet.css" rel="stylesheet" type="text/css">
.....
<div id="controls">
<div id="red" onClick="styler(1)">R</div>
<div id="green" onClick="styler(2)">G</div>
<div id="blue" onClick="styler(3)">B</div>
<div id="reset" onClick="styler(4)">Reset</div>
</div>
JavaScript的
function styler(attr){
switch(attr){
case'1':document.----- = "stylesheet1.css";break;
case'2':document.----- = "stylesheet2.css";break;
case'3':document.----- = "stylesheet3.css";break;
case'4':document.----- = "stylesheet.css";break;
default:;break;
}
}
將ID添加到鏈接標記並使用
<link id="myStyleSheet" href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function styler(attr){
var href;
switch(attr){
case'1':href = "stylesheet1.css";break;
case'2':href = "stylesheet2.css";break;
case'3':href = "stylesheet3.css";break;
case'4':href = "stylesheet.css";break;
default:;break;
}
document.getElementById('myStyleSheet').href = href;
}
</script>
看這篇文章
應該很容易:
<html>
<head>
<link rel="stylesheet" href="/tmp/default.css" id="default">
</head>
<body>
<button id="bt">change style</button>
<script>
var targetStyle = document.querySelector('#default'),
otherStyle = '/tmp/style2.css';
document.querySelector('#bt').onclick = function(){
targetStyle.href=otherStyle;
};
</script>
</body>
</html>
試試吧
<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script>
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
</head>
<body>
<h2>Javascript Change StyleSheet Without Page Reload</h2>
<button onclick="swapStyleSheet('dark.css')">Dark Style Sheet</button>
<button onclick="swapStyleSheet('blue.css')">Blue Style Sheet</button>
<button onclick="swapStyleSheet('default.css')">Default Style Sheet</button>
</body>
</html>
另一種選擇是切換鏈接DOM元素的disabled
屬性。 根據Mozilla , disabled
HTML屬性是非標准的,但javascript屬性是 。 所以如果你用JS切換它應該沒問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.