<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link id="css1" rel="stylesheet" type="text/css" href="css1.css"/>
<script id="css2" type="text/javascript">
function Btn(){
var a =document.getElementById("css1")
a.href="css1.css"
}
function Btn2(){
var b =document.getElementById("css2")
a.href="css2.css"
}
</script>
</head>
<body>
<input type="button" name="" id="" value="红色" onclick="Btn()"/>
<input type="button" name="" id="" value="蓝色" onclick="Btn2()"/>
</body>
</html>
按照你的思路,应该是想通过修改对象的href来修改导入的css文件,那么
function Btn2(){
var b =document.getElementById("css2") //“css2”改为“css1”
a.href="css2.css" //a改为b
}
如果想要看到效果请确保你的css文件跟html文件放在同一目录下,并且css里有内容,以下是我修改后的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link id="css1" rel="stylesheet" type="text/css" href="css1.css"/>
<script type="text/javascript">
function Btn(){
var a =document.getElementById("css1")
a.href="css1.css"
}
function Btn2(){
var b =document.getElementById("css1")
b.href="css2.css"
}
</script>
</head>
<body>
<input type="button" name="" id="" value="红色" onclick="Btn()"/>
<input type="button" name="" id="" value="蓝色" onclick="Btn2()"/>
</body>
</html>
----------------------------------------------------------------------------------------------------------
css1文件:
body{background:red;}
css2文件:
body{background:blue;}
验证无误