html:resize

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- html:resize [2021/11/20 16:44] – 만듦 taekgu
+++ html:resize [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 1: / 줄 1: @@
+====== ResizeObserver ======
+<code javascript>
+                const resizeObserver = new ResizeObserver((entries) => {
+                    for (let entry of entries) {
+                        var msg = "good! ";
+                        if (entry.contentBoxSize) {
+                            msg += "boxSize:";
+                            if (entry.contentBoxSize[0]) {
+                                msg += entry.contentBoxSize[0].inlineSize;
+                                msg += ":";
+                                msg += entry.contentBoxSize[0].blockSize;
+                            } else {
+                                msg += entry.contentBoxSize.inlineSize;
+                                msg += ":";
+                                msg += entry.contentBoxSize.blockSize;
+                            }
+                            msg += ":";
+                        } else {
+                            msg += "rectSize:";
+                            msg += entry.contentRect.width;
+                            msg += ":";
+                            msg += entry.contentRect.height;
+                            msg += ":";
+                        }
+                        msg += "body-width : " + $("body").width() + "; ";
+                        msg += "body-height : " + $("body").height() + "; ";
+                        msg += "main-width : " + $("main").width() + "; ";
+                        msg += "main-height : " + $("main").height() + "; ";
+                        $("#message").html(msg);
+                    }
+                });
+                resizeObserver.observe(document.querySelector("#content"));
+               </code>