js空div样式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#one{
width:500px;
height:500px;
background:#FF44AA;
}
button{
width:150px;
height:80px;
font-size:22px;
}
</style>
</head>
<body>
<div id="one"></div>
<button onclick="width()">宽</button>
<button onclick="h()">高</button>
<button onclick="c()">粉色</button>
<button onclick="r()">重置</button>
<button onclick="b()">圆形</button>
<button onclick="re()">蓝色</button>
<button onclick="yel()">黄色</button>
<button onclick="suiji()">随机颜色</button>
</body>
<script>
var getRandomColor = function() {
return '#' +
(function(color) {
return (color += '0123456789abcdef' [Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
})('');
}
function width(){
document.getElementById('one').style.width="800px";
}
function h(){
document.getElementById('one').style.height="800px";
}
function c(){
document.getElementById('one').style.background="pink";
}
function yel(){
document.getElementById('one').style.background="yellow";
}
function r(){
document.getElementById('one').style.width="500px";
document.getElementById('one').style.height="500px";
document.getElementById('one').style.background='red';
document.getElementById('one').style.borderRadius="0px";
}
function suiji(){
document.getElementById('one').style.background=getRandomColor();
}
function b(){
document.getElementById('one').style.borderRadius="250px";
}
function re(){
document.getElementById('one').style.background="blue";
}
</script>
</html>代码运行结果如下：
