<!DOCTYPE html>
<html lang='en'>
<head>
<meat charset='UTF-8'>
<meat name='viewport' content='width=device-width, initial-scale=1.0'>
<style>
#show {
width: 200px;
height: 200px;
border: 1px solid;
}
</style>
</head>
<body>
<div id="show">测试</div>
<button type="background" cssVal='green'>改变背景</button>
<button type="color" cssVal='red'>改变文字颜色</button>
<button type="fontSize" cssVal='28px'>改变文字大小</button>
<button type="fontWeight" cssVal='bold'>改变文字宽度</button>
<button type="opacity" cssVal='0.3'>改变透明度</button>
<script>
// let ODom = document.getElementById("show");
// let btnGroup = document.getElementsByTagName('button');
// for (let i = 0; i < btnGroup.length; i++) {
// btnGroup[i].onclick = function () {
// changeStyle(ODom, this.getAttribute('type'))
// }
// }
// // 改变目标元素样式
// function changeStyle(dom, type) {
// let typeObj = {
// bg: ['background', 'green'],
// cl: ['color', 'red'],
// fs: ['fontSize', '28px'],
// fw: ['fontWeight', 'bold'],
// op: ['opacity', '0.3'],
// }
// if (type instanceof Array) {
// type.forEach((item) => {
// dom.style[item.cssType] = item.cssVal;
// })
// } else {
// let cssType = typeObj[type][0];
// let cssVal = typeObj[type][1];
// dom.style[cssType] = cssVal;
// }
// }
// changeStyle(ODom, [
// {
// cssType: 'background',
// cssVal: 'black'
// },
// {
// cssType: 'color',
// cssVal: 'red'
// }
// ])
let ODom = document.getElementById("show");
let btnGroup = document.getElementsByTagName('button');
let ProxyEvent = function (func) {
let timer;
let cahce = [];
// 明确知道参数个数的情况
// return function (dom, type) {
// if (type instanceof Object) {
// clearTimeout(timer);
// console.log(arguments, '----arguments')
// cahce.push(type);
// timer = setTimeout(() => {
// changeStyle(dom, cahce);
// cahce = [];
// }, 2000);
// }
// }
// 不知道参数的情况,用arguments
return function () {
let oDom = [].shift.call(arguments);
let type = [].shift.call(arguments);
if (type instanceof Object) {
clearTimeout(timer);
cahce.push(type);
timer = setTimeout(() => {
changeStyle(oDom, cahce);
cahce = [];
}, 2000);
}
}
}
let proxyEvent = ProxyEvent(changeStyle);
for (let i = 0; i < btnGroup.length; i++) {
btnGroup[i].onclick = function () {
proxyEvent(ODom, {
cssType: this.getAttribute('type'),
cssVal: this.getAttribute('cssVal')
})
}
}
// 改变目标元素样式
function changeStyle(dom, type) {
if (type instanceof Array) {
type.forEach((item) => {
dom.style[item.cssType] = item.cssVal;
})
}
}
</script>
</body>
</html>