CSS样式动态修改示例
本文介绍了一个简单的HTML页面示例，演示了如何使用JavaScript来动态地修改元素的CSS样式。当点击页面上的div元素时，该元素的大小、背景颜色及浮动属性会发生变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="" rel="stylesheet">
<style type="text/css">
#box{
width:100px;
height:100px;
background: green;
}
</style>
</head>
<body>
<div id="box" style=''>div</div>
<script type="text/javascript">
/*
一、样式操作
通过style属性添加样式：obj.style.width
带-样式==>驼峰命名：obj.style.backgroundColor = 'red';
*/
var obj = document.getElementById('box');
obj.onclick = function(){
obj.style.width = 250+'px';
obj.style.height = 250+'px';
obj.style.backgroundColor = 'red';
obj.style.borderTop = '1px solid green';
}
</script>
</body>
</html>
效果如下
点击前： 点击后：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> hello world</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
#box{
width:100px;
height:100px;
background: green;
margin:0 auto
}
</style>
</head>
<body>
<div id="box" style=''>div</div>
<script type="text/javascript">
/*
一、样式操作
obj.style.float = 'left';
*/
var obj = document.getElementById('box');
obj.onclick = function(){
// obj.style.cssText = 'width:250px;height:250px;border-top:1px solid green';
obj.style.float = 'left';
}
</script>
</body>
</html>
点击前：
点击后
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
