学到的一个用javascript变换皮肤的方法

最新推荐文章于 2025-08-07 21:48:39 发布

转载最新推荐文章于 2025-08-07 21:48:39 发布 · 57 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/caveman/archive/2009/04/14/1435441.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript和DOM操作实现网页皮肤切换的方法。通过设置不同的样式表来改变网站外观，仅适用于单页面且用户浏览器需支持JavaScript。文章提供了具体的代码实现及按钮示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本方法只适用于单页面，而且在用户浏览器支持javascript的前提下，方法是用Javascript的DOM方法访问link对象，禁用不需要的样式，代码：

先做两组皮肤：
<link rel="stylesheet" href="style/style1.css" type="text/css" title="style1"/>
<link rel="stylesheet" href="style/style2.css" type="text/css" title="style2" />

脚本：
<script type="text/javascript">
function setStyle(title)
{

var i, links;
//用DOM方法获得所有的link元素
links = document.getElementsByTagName("link");
for(i=0; links[i]; i++)
{

//判断此link元素的rel属性中是否有style关键字
//即此link元素是否为样式表link
//同时判断此link元素是否含有title属性
if(links[i].getAttribute("rel").indexOf("style") != -1 && links[i].getAttribute("title"))
{

//先全部设为disabled
links[i].disabled = true;

//再将选择的放开
if(links[i].getAttribute("title").indexOf(title) != -1)

links[i].disabled = false;

}

}
</script>

　　放两个按钮：
<input type="button" value="style1" onclick="setStyle('style1');" />
<input type="button" value="style2" onclick="setStyle('style2');" />

转载于:https://www.cnblogs.com/caveman/archive/2009/04/14/1435441.html