使用原生JS 修改 DIV 属性
程序员文章站
2022-05-26 14:45:42
本例参考并改进自：https://www.jianshu.com/p/2961d9c317a3 大家可以一起学习！！ ......
本例参考并改进自：https://www.jianshu.com/p/2961d9c317a3
大家可以一起学习！！
<!doctype html>
<html lang="ch-zn">
<head>
<meta charset="utf-8">
<title>按键修改div属性</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
button {
margin-top: 20px;
width: 100px;
height: 60px;
background-color: green;
color: #fff;
border: none;
}
div {
width: 400px;
height: 400px;
background-color: black;
margin: 20px auto;
display: block;
transition: all 1s;
}
</style>
</head>
<body>
<button>变宽</button>
<button>变高</button>
<button>变色</button>
<button>变圆</button>
<button>隐藏</button>
<button>重置</button>
<div></div>
<script type="text/javascript">
/**
* 修改属性
* @param1 元素
* @param2 属性（注意这里是字符串类型）
* @param3 属性值
*/
let changestyle = (ele, attr, value) => {
// 注意：这里的 attr 为字符串，如果用.attr 的方式则无用
ele.style[attr] = value;
}
/**
* 随机生成 rgb 颜色
* @param1 最小值
* @param2 最大值
*/
let changecolor = (min, max) => {
r = math.floor(math.random() * (max - min) + min);
g = math.floor(math.random() * (max - min) + min);
b = math.floor(math.random() * (max - min) + min);
return 'rgb('+ r + ',' + g + ',' + b + ')';
}
window.onload = function () {
const buttons = document.queryselectorall('button');
const divbox = document.queryselector('div');
let changeattrs = new array('width', 'height', 'background', 'borderradius', 'display', 'display');
for (let i = 0; i < buttons.length; i++) {
buttons[i].addeventlistener('click', function () {
// 当按下重置按钮后将重置样式
i == buttons.length - 1 && (divbox.style.csstext = '');
// 只有当且每次按下变色的时候随机生成颜色
let bgcolor = i == 2 ? changecolor(0, 255) : '';
let changvalues = new array('600px', '600px', bgcolor, '50%', 'none', 'block');
changestyle(divbox, changeattrs[i], changvalues[i]);
});
}
}
</script>
</body>
</html>
上一篇： python解释器安装及环境变量配置