JavaScript笔记02----网页换肤

最新推荐文章于 2024-10-02 05:39:15 发布

_kirakira_

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量162

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43212582/article/details/104756228

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.通过更改css样式达到换肤效果。在下面的html代码中，直接使用：

document.getElementById('l1').herf="css1.css"

更改css在我的谷歌浏览器和火狐浏览器里没有达到点击按钮更换皮肤的效果，后面参考：动态修改CSS使用：

var lk=document.getElementById('l1');
				//lk.href="css1.css";
				lk.setAttribute('href','css1.css')

实现了换肤。

2.在css中使用background-size:100% 100%;可以使得背景图片自适应按钮的大小

代码：

css1.css:

@charset "utf-8";

body {background: #55AAFF;}
input{background: url(1.gif)no-repeat;
     width:200px;
     height:100px;
     background-size:100% 100%;
     border-style: none;}

css2.css:

@charset "utf-8";

body {background: #55AAFF;}
input{background: url(2.gif)no-repeat;
     width:200px;
     height:100px;
     background-size:100% 100%;
	 border-style: none;}

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>换肤</title>
		<link id="l1" rel="stylesheet" type="text/css" href="css1.css"/>
		<script>
			function toskin1()
			{
				var lk=document.getElementById('l1');
				//lk.href="css1.css";
				lk.setAttribute('href','css1.css')
				
			}
			
			function toskin2()
			{
				var lk=document.getElementById('l1');
				//lk.herf="css2.css";
				lk.setAttribute('href','css2.css')
			}
		</script>
	</head>
	<body>
		<input type="button" value="皮肤1" onclick="toskin1()" />
		<input type="button" value="皮肤2" onclick="toskin2()" />
	</body>
</html>

效果：

任何标签都可以加id，包括link
任何标签的任何属性都可以修改

在链接中添加JS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="javascript:alert('index');">链接</a>
	</body>
</html>