JavaScript （实现换皮肤）

最新推荐文章于 2023-06-16 17:55:03 发布

原创最新推荐文章于 2023-06-16 17:55:03 发布 · 831 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文提供了一个简单的HTML、CSS和JavaScript示例，演示如何通过更改CSS类来实现网页换肤功能，使网页外观在不同样式之间切换。

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

/**

*innerHTML-可同时显示没有的代码

function myDOMInnerHTML(){
	var myDiv = document.getElementById("myTest");
	alert(myDiv.innerHTML);		//直接显示innerHTML的内容
	//修改innerHTML，可直接添加代码
	myDiv.innerHTML = "<img src='01.jpg' title='情人坡'>";
}

/**
*实现换皮肤例子
*/

<style type="text/css">
.myUL1{
	color:#0000FF;
	font-family:Arial;
	font-weight:bold;
}
.myUL2{
	color:#FF0000;
	font-family:Georgia, "Times New Roman", Times, serif;
}
</style>
<script language="javascript">
function check(){
	var oMy = document.getElementsByTagName("ul")[0];<span style="white-space:pre">	</span>//获取ul元素
	oMy.className =(oMy.className=="myUL1"? "myUL2":"myUL1");	//修改CSS类
}
</script>
</head>


<body>
	<ul onclick="check()" class="myUL1">
		<li>HTML</li>
		<li>JavaScript</li>
		<li>CSS</li>
	</ul>
</body>