js控制CSS

来源：互联网发布：仿淘宝购物车代码编辑：程序博客网时间：2024/04/30 02:07

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS调用CSS</title>
<style>
#dStyle{
width:500px;
height:400px;
background-color:#F00;
}
.dStyle{
width:500px;
height:400px;
background-color:#F00;
}
.dStyle2{
width:500px;
height:400px;
background-color:#0F0;
}
.oldStyle{
font-size:20px;
color:#309;
}
.newStyle{
font-size:80px;
color:#309;
}
</style>
<script>
function changeColor(){
var obj = document.getElementById("d");//找到要改变样式的对象div
//obj.style.backgroundColor = "green";//指定一种样式，
//obj.style.color = "blue";

//如果这个样式比较多，有20个,就将所有的样式用.写好，直接调用
obj.className ="dStyle2";
}
function bigger(){
var obj = document.getElementById("f");
obj.className = "newStyle";
}

function simmer(){
var obj = document.getElementById("v");
//alert(obj.style.fontSize);
var obj2 = obj.style.fontSize;
var obj3 = obj2.substr(0,obj2.length-2);
obj.style.fontSize = (obj3-10)+"px";

}
</script>
</head>

<body>
<input type="button" value="绿色" onclick="changeColor()" />
<input type="button" value="变大" onclick="bigger()" />
<input type="button" value="变小" onclick="simmer()" />

<div id="d" class="dStyle"></div>
<div id="f" class="oldStyle">一段文字</div>
<div id="v" style="font-size:100px">点我我就变小！</div>
</body>
</html>

0 0