UC知道js动态调用外部CSS的问题
来源：百度知道 编辑：UC知道 时间：2024/05/27 05:08:05
要求是：默认情况下显示是PPT模式，当点击“详细信息”时显示详细信息模式，当点击“幻灯片模式”是显示PPT模式；
思路；首先给链接外部样式元素link添加id为csslinkid,然后用getElementById("csslinkid")取得该元素，在showxi()中设置href属性为"11-6catalog.css";同样在showppt()设置href为11-6ppt.css";但在具体运行中出现“缺少对象”的提示。
代码如下：
<html>
<head>
<title>电子相册</title>
<link rel="stylesheet" href="11-6ppt.css" id="csslinkid">
<script language="javascript" type="text/css">
var obj=document.getElementById("csslinkid")
function showxi(){
obj.href="11-6catalog.css";
}
function showppt(){
obj.href="11-6ppt.css";
}
</script>
</head>
<body>
<a href="#" onclick="showxi()">详细信息</a>
<a href="#" onclick="showppt()">幻灯片模式</a>
<!--html具体内容-->
思路；首先给链接外部样式元素link添加id为csslinkid,然后用getElementById("csslinkid")取得该元素，在showxi()中设置href属性为"11-6catalog.css";同样在showppt()设置href为11-6ppt.css";但在具体运行中出现“缺少对象”的提示。
代码如下：
<html>
<head>
<title>电子相册</title>
<link rel="stylesheet" href="11-6ppt.css" id="csslinkid">
<script language="javascript" type="text/css">
var obj=document.getElementById("csslinkid")
function showxi(){
obj.href="11-6catalog.css";
}
function showppt(){
obj.href="11-6ppt.css";
}
</script>
</head>
<body>
<a href="#" onclick="showxi()">详细信息</a>
<a href="#" onclick="showppt()">幻灯片模式</a>
<!--html具体内容-->
<html>
<head>
<title>电子相册</title>
<link rel="stylesheet" href="11-6ppt.css" id="csslinkid">
<script language="javascript">
var obj=document.getElementById("csslinkid")
function showxi(){
obj.href="11-6catalog.css";
}
function showppt(){
obj.href="11-6ppt.css";
}
</script>
</head>
<body>
<a href="#" onclick="showxi()">详细信息</a>
<a href="#" onclick="showppt()">幻灯片模式</a>
<!--html具体内容-->
<!--html具体内容-->
<!--html具体内容-->
</body>
</html>
本身你的JS是没错的。<script language="javascript" type="text/css"> 你这个地方变成了CSS文件。
同时引进两个CSS
<link rel="stylesheet" href="11-6catalog.css"><link