พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน onresize Event Attribute

onresize Event Attribute ใน HTML5 เป็นอีเวนต์ที่ใช้ตรวจจับการเปลี่ยนแปลงขนาดของหน้าต่างเบราว์เซอร์หรือขนาดขององค์ประกอบ (element) บางอย่างที่มีขนาดเปลี่ยนแปลง เช่น หากผู้ใช้งานทำการปรับขนาดของหน้าต่างเบราว์เซอร์ เหตุการณ์นี้จะถูกกระตุ้นขึ้น และเราสามารถใช้ JavaScript เพื่อดำเนินการเมื่อขนาดหน้าต่างเปลี่ยนแปลงได้

การใช้งาน onresize กับหน้าต่างเบราว์เซอร์ (window)

การใช้งานทั่วไปคือการใช้ onresize กับหน้าต่างเบราว์เซอร์ เมื่อหน้าต่างถูกปรับขนาด การเขียนโค้ดเพื่อให้ทำบางสิ่งบางอย่างเมื่อหน้าต่างถูกขยายหรือย่อขนาดทำได้โดยใช้โค้ดต่อไปนี้

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onresize Example</title>
    <script>
        function resizeFunction() {
            document.getElementById("output").innerHTML = "หน้าต่างถูกปรับขนาดเป็น: " + window.innerWidth + "px กว้าง และ " + window.innerHeight + "px สูง";
        }
    </script>
</head>
<body onresize="resizeFunction()">
    <h2>Resize หน้าต่างเพื่อดูผลลัพธ์</h2>
    <p id="output">ปรับขนาดหน้าต่างเพื่อดูการเปลี่ยนแปลง</p>
</body>
</html>

การใช้งาน onresize กับองค์ประกอบ HTML

ในบางกรณี การตรวจจับการเปลี่ยนแปลงขนาดขององค์ประกอบ HTML อาจมีประโยชน์ เช่น ตรวจจับเมื่อ div ถูกปรับขนาด (ต้องการใช้ JavaScript ร่วมกับ CSS เพื่อสร้างการเปลี่ยนแปลงขนาด)

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onresize with div Example</title>
    <style>
        #myDiv {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            resize: both; /* ให้สามารถปรับขนาดได้ */
            overflow: auto;
        }
    </style>
    <script>
        function divResizeFunction() {
            var div = document.getElementById("myDiv");
            document.getElementById("divOutput").innerHTML = "ขนาดใหม่: " + div.offsetWidth + "px กว้าง และ " + div.offsetHeight + "px สูง";
        }
    </script>
</head>
<body>
    <div id="myDiv" onresize="divResizeFunction()"></div>
    <p id="divOutput">ปรับขนาด div ด้านบนเพื่อดูผลลัพธ์</p>
</body>
</html>

ข้อสังเกต

  • ในการใช้งานกับองค์ประกอบ HTML เช่น div นั้น การตรวจจับ resize อาจไม่ถูกรองรับโดยตรงในทุกเบราว์เซอร์ ซึ่งอาจต้องใช้การตรวจจับการเปลี่ยนแปลงขนาดผ่าน JavaScript และการใช้ ResizeObserver เพื่อให้สามารถตรวจจับการเปลี่ยนแปลงขนาดขององค์ประกอบได้แม่นยำขึ้น

ตัวอย่างของ ResizeObserver

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ResizeObserver Example</title>
    <style>
        #myDiv {
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            resize: both;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="myDiv"></div>
    <p id="resizeOutput">ขนาดเริ่มต้น: 200px x 200px</p>

    <script>
        const myDiv = document.getElementById('myDiv');
        const output = document.getElementById('resizeOutput');

        const resizeObserver = new ResizeObserver(entries => {
            for (let entry of entries) {
                const { width, height } = entry.contentRect;
                output.textContent = `ขนาดใหม่: ${width}px กว้าง และ ${height}px สูง`;
            }
        });

        resizeObserver.observe(myDiv);
    </script>
</body>
</html>

การประยุกต์ใช้งาน onresize

  • การออกแบบหน้าเว็บแบบ Responsive: สามารถใช้เพื่อตรวจสอบเมื่อขนาดหน้าต่างเปลี่ยนแปลง เพื่อปรับเปลี่ยนองค์ประกอบในหน้าเว็บให้แสดงผลได้อย่างเหมาะสม
  • การพัฒนาระบบแดชบอร์ด: ใช้ตรวจจับเมื่อผู้ใช้ปรับขนาดของกราฟหรือแผนภูมิต่าง ๆ เพื่อให้กราฟขยายหรือย่อขนาดตามหน้าจอโดยอัตโนมัติ
  • การพัฒนาแอปพลิเคชันบนเว็บ: การใช้งาน ResizeObserver ช่วยให้การแสดงผลมีความยืดหยุ่นมากขึ้น
Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ