本文介绍了如何使用BOM(BrowserObjectModel)和JavaScript的onresize事件，实现在浏览器窗口大小变化时动态调整ID为myDiv的DIV元素的样式，使其宽度和高度自动适应窗口尺寸。
<!DOCTYPE html> <html> <head> <title>BOM实现DIV样式</title> <style> #myDiv { background-color: red; } </style> </head> <body> <div id="myDiv"></div> <script> window.onresize = function() { // 获取浏览器窗口的宽度和高度 let windowWidth = window.innerWidth; let windowHeight = window.innerHeight; // 获取需要设置样式的 DIV 元素 let myDiv = document.getElementById("myDiv"); // 设置 DIV 的宽度和高度为浏览器窗口大小的一半 myDiv.style.width = windowWidth / 2 + "px"; myDiv.style.height = windowHeight / 2 + "px"; console.log(1); } </script> </body> </html>
