49 lines
1.1 KiB
HTML
49 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>案例</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.box {
|
|
background: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<button>点我</button>
|
|
<div class="box" style="width: 100px; height: 100px;"></div>
|
|
</body>
|
|
|
|
<script>
|
|
var button = $("button"),
|
|
box = $(".box");
|
|
|
|
button.onclick = function () {
|
|
box.style.width = `${parseInt(box.style.width) + 20}px`
|
|
box.style.height = `${parseInt(box.style.height) + 20}px`
|
|
console.dir(box);
|
|
}
|
|
|
|
button.oncontextmenu = function () {
|
|
box.style.width = `${parseInt(box.style.width) - 20}px`
|
|
box.style.height = `${parseInt(box.style.height) - 20}px`
|
|
|
|
// 阻止 浏览器的默认事件
|
|
return false;
|
|
}
|
|
|
|
function $(className) {
|
|
return document.querySelector(className)
|
|
}
|
|
</script>
|
|
|
|
</html> |