<link
href="style_change/black/sty_black.css"
rel="stylesheet"
type="text/css"
id="ch_css"
/>
点击某个按钮的时候,用JS获取<link>标签的id,即获取这个<link>对象,然后通过JS更换href链接到另一个CSS样式表,达到换肤的目的。
很简单,只要把html中各个标签的样式都提取出来,放到css中,在给各个元素引用就可以了。
1、在html中找到<head></head>标签,在其中增加<style type="text/css"></style>标记
2、找到html中的一个元素比如
<div style="background:greenalign:centerwidth:20%font-size:14px">xxx</div>这种,将其中的style=""双引号之间的内容复制,粘贴到1中创建的标记内。在用一个选择器包裹住,最后在元素上指定class="选择器"就可以了
3、例子 如下两个div,第一个在style中设置样式,第二个通过css引用样式,最终效果过一样
<html><head>
<style type="text/css">
.divcss{
background:green
align:center
width:20%
}
</style>
</head>
<body>
<div style="background:greenalign:centerwidth:20%">xxx</div>
<div class="divcss">xxx</div>
</body>
</html>
1、可以使用css直接进行相关的css变换
2、使用js进行css变换
比如,鼠标经过时css样式与鼠标移开css样式
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Robert.Leng">
<title>不刷新 css变换实例</title>
<style>
.test{
border:1px solid #ccc
color:red
}
.test:hover{
color:yellow
border:1px solid #f0f0f0
}
</style>
</head>
<body>
<div class="test">
<p>这只是一个测试</p>
<span>2017-10-31</span>
</div>
</body>
</html>
js举例:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Robert.Leng">
<title>不刷新 css变换实例</title>
<style>
.test{
border:1px solid #ccc
color:red
}
.test.current{
color:yellow
border:1px solid #f0f0f0
}
</style>
</head>
<body>
<div class="test">
<p>这只是一个测试</p>
<span>2017-10-31</span>
</div>
<spcript src="/jquery.mini.js"> //引入jquery库
<script>
$(document).ready(function(){
$('.test').mouseover(function()
{
$(this).addClass("current")
}).mouseout(function()
{
$(this).removeClass("current")
})
})
</script>
</body>
</html>
当然上面的css可以直接在js中写,这里只是为了方便没有这样做,具体的js添加css属性可参考jquery库