[英]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.