Cara menggunakan DIMENSIIONS pada JavaScript

Question

Saya sudah html sampel berikut, ada DIV yang memiliki lebar 100%. Ini mengandung beberapa elemen. Saat melakukan pengubahan ukuran jendela, elemen-elemen bagian dalam dapat diposisikan ulang, dan dimensi div dapat berubah. Saya bertanya apakah mungkin untuk mengaitkan peristiwa perubahan dimensi div? dan Bagaimana cara melakukannya? Saat ini saya mengikat fungsi panggilan balik ke acara mengubah ukuran jQuery pada DIV target, namun, tidak ada log konsol yang dihasilkan, lihat di bawah:

Table of Contents Show

Langkah langkah:
Contoh HTML:
Contoh Menjalankan
Lihat lebih lanjut:
Apa itu DOM dalam JavaScript?
Bagaimana cara memanggil fungsi di JavaScript?
Apa itu DOM JavaScript dan bagaimana model implementasinya?
Di dalam elemen HTML manakah kita meletakkan JavaScript?

<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" language="javascript">
            $('#test_div').bind('resize', function(){
                console.log('resized');
            });
    </script>
</head>
<body>
    <div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
    </div>
</body>
</html>

Ada metode yang sangat efisien untuk menentukan apakah ukuran elemen telah diubah.

http://marcj.github.io/css-element-queries/

Perpustakaan ini memiliki kelas ResizeSensor yang dapat digunakan untuk mendeteksi ukuran.
Ini menggunakan pendekatan berbasis peristiwa, jadi sangat cepat dan tidak membuang waktu CPU.

Contoh:

new ResizeSensor(jQuery('#divId'), function(){ 
    console.log('content dimension changed');
});

Tolong jangan gunakan plugin onresize jQuery karena menggunakan loop setTimeout() untuk memeriksa perubahan.
INI IS PERLAHAN YANG LUAR BIASA DAN TIDAK AKURAT.

Pengungkapan: Saya terkait langsung dengan perpustakaan ini.

Anda harus mengikat acara resize pada objek window, bukan pada elemen html umum.

Anda kemudian dapat menggunakan ini:

$(window).resize(function() {
    ...
});

dan dalam fungsi panggilan balik Anda dapat memeriksa lebar baru dari panggilan div Anda

$('.a-selector').width();

Jadi, jawaban untuk pertanyaan Anda adalah tidak , Anda tidak dapat mengikat acara resize ke div.

Jangka panjang, Anda akan dapat menggunakan server ResizeOb .

new ResizeObserver(callback).observe(element);

Sayangnya saat ini tidak didukung secara default di banyak browser.

Sementara itu, Anda dapat menggunakan fungsi seperti berikut ini. Karena, sebagian besar perubahan ukuran elemen akan berasal dari mengubah ukuran jendela atau mengubah sesuatu di DOM. Anda dapat mendengarkan pengubahan ukuran jendela dengan event resize window dan Anda dapat mendengarkan perubahan DOM menggunakan MutationObserver .

Berikut adalah contoh fungsi yang akan memanggil Anda kembali ketika ukuran elemen yang disediakan berubah sebagai akibat dari salah satu dari peristiwa tersebut:

var onResize = function(element, callback) {
  if (!onResize.watchedElementData) {
    // First time we are called, create a list of watched elements
    // and hook up the event listeners.
    onResize.watchedElementData = [];

    var checkForChanges = function() {
      onResize.watchedElementData.forEach(function(data) {
        if (data.element.offsetWidth !== data.offsetWidth ||
            data.element.offsetHeight !== data.offsetHeight) {
          data.offsetWidth = data.element.offsetWidth;
          data.offsetHeight = data.element.offsetHeight;
          data.callback();
        }
      });
    };

    // Listen to the window's size changes
    window.addEventListener('resize', checkForChanges);

    // Listen to changes on the elements in the page that affect layout 
    var observer = new MutationObserver(checkForChanges);
    observer.observe(document.body, { 
      attributes: true,
      childList: true,
      characterData: true,
      subtree: true 
    });
  }

  // Save the element we are watching
  onResize.watchedElementData.Push({
    element: element,
    offsetWidth: element.offsetWidth,
    offsetHeight: element.offsetHeight,
    callback: callback
  });
};

Solusi terbaik adalah dengan menggunakan Elemen Query. Namun, mereka tidak standar, tidak ada spesifikasi - dan satu-satunya pilihan adalah menggunakan salah satu dari polyfill/libraries yang tersedia, jika Anda ingin pergi dengan cara ini.

Gagasan di balik kueri elemen adalah memungkinkan wadah tertentu pada halaman untuk menanggapi ruang yang disediakan untuk itu. Ini akan memungkinkan untuk menulis komponen sekali dan kemudian menjatuhkannya di mana saja pada halaman, sementara itu akan menyesuaikan isinya dengan ukuran saat ini. Tidak peduli apa ukuran Jendela itu. Ini adalah perbedaan pertama yang kita lihat antara kueri elemen dan kueri media. Semua orang berharap bahwa pada suatu titik suatu spesifikasi akan dibuat yang akan membakukan permintaan elemen (atau sesuatu yang mencapai tujuan yang sama) dan menjadikannya asli, bersih, sederhana dan kuat. Kebanyakan orang setuju bahwa pertanyaan Media sangat terbatas dan tidak membantu untuk desain modular dan responsif sebenarnya.

Ada beberapa polyfill/perpustakaan yang memecahkan masalah dengan cara yang berbeda (bisa disebut workarounds alih-alih solusi):

Kueri Elemen CSS - https://github.com/marcj/css-element-queries
BoomQueries - https://github.com/BoomTownROI/boomqueries
eq.js - https://github.com/Snugug/eq.js
ElementQuery - https://github.com/tysonmatanich/elementQuery
Dan beberapa lagi, yang tidak akan saya sebutkan di sini, tetapi Anda bebas mencari. Saya tidak akan bisa mengatakan yang mana dari opsi yang tersedia saat ini adalah yang terbaik. Anda harus mencoba beberapa dan memutuskan.

Saya telah melihat solusi lain untuk masalah serupa yang diajukan. Biasanya mereka menggunakan timer atau ukuran Window/viewport di bawah tenda, yang bukan solusi nyata. Lebih jauh, saya pikir idealnya ini harus diselesaikan terutama dalam CSS, dan bukan dalam javascript atau html.

Saya menemukan perpustakaan ini berfungsi ketika solusi MarcJ tidak:

https://github.com/sdecima/javascript-detect-element-resize

Ini sangat ringan dan bahkan mendeteksi ukuran alami melalui CSS atau hanya memuat/rendering HTML.

Contoh kode (diambil dari tautan):

<script type="text/javascript" src="detect-element-resize.js"></script>
<script type="text/javascript">
  var resizeElement = document.getElementById('resizeElement'),
      resizeCallback = function() {
          /* do something */
      };
  addResizeListener(resizeElement, resizeCallback);
  removeResizeListener(resizeElement, resizeCallback);
</script>

Lihatlah ini http://benalman.com/code/projects/jquery-resize/examples/resize/

Ini memiliki berbagai contoh. Coba ubah ukuran jendela Anda dan lihat bagaimana elemen di dalam elemen wadah disesuaikan.

Contoh dengan js fiddle untuk menjelaskan cara membuatnya bekerja.
.__ Lihatlah biola ini http://jsfiddle.net/sgsqJ/4/

Dalam peristiwa resize () terikat pada elemen yang memiliki kelas "test" dan juga ke objek window Dan dalam mengubah ukuran callback objek window $ ('. Test'). Resize () dipanggil.

misalnya.

$('#test_div').bind('resize', function(){
            console.log('resized');
});

$(window).resize(function(){
   $('#test_div').resize();
});

ResizeSensor.js adalah bagian dari perpustakaan besar, tapi saya mengurangi fungsinya menjadi THIS:

function ResizeSensor(element, callback)
{
    let zIndex = parseInt(getComputedStyle(element));
    if(isNaN(zIndex)) { zIndex = 0; };
    zIndex--;

    let expand = document.createElement('div');
    expand.style.position = "absolute";
    expand.style.left = "0px";
    expand.style.top = "0px";
    expand.style.right = "0px";
    expand.style.bottom = "0px";
    expand.style.overflow = "hidden";
    expand.style.zIndex = zIndex;
    expand.style.visibility = "hidden";

    let expandChild = document.createElement('div');
    expandChild.style.position = "absolute";
    expandChild.style.left = "0px";
    expandChild.style.top = "0px";
    expandChild.style.width = "10000000px";
    expandChild.style.height = "10000000px";
    expand.appendChild(expandChild);

    let shrink = document.createElement('div');
    shrink.style.position = "absolute";
    shrink.style.left = "0px";
    shrink.style.top = "0px";
    shrink.style.right = "0px";
    shrink.style.bottom = "0px";
    shrink.style.overflow = "hidden";
    shrink.style.zIndex = zIndex;
    shrink.style.visibility = "hidden";

    let shrinkChild = document.createElement('div');
    shrinkChild.style.position = "absolute";
    shrinkChild.style.left = "0px";
    shrinkChild.style.top = "0px";
    shrinkChild.style.width = "200%";
    shrinkChild.style.height = "200%";
    shrink.appendChild(shrinkChild);

    element.appendChild(expand);
    element.appendChild(shrink);

    function setScroll()
    {
        expand.scrollLeft = 10000000;
        expand.scrollTop = 10000000;

        shrink.scrollLeft = 10000000;
        shrink.scrollTop = 10000000;
    };
    setScroll();

    let size = element.getBoundingClientRect();

    let currentWidth = size.width;
    let currentHeight = size.height;

    let onScroll = function()
    {
        let size = element.getBoundingClientRect();

        let newWidth = size.width;
        let newHeight = size.height;

        if(newWidth != currentWidth || newHeight != currentHeight)
        {
            currentWidth = newWidth;
            currentHeight = newHeight;

            callback();
        }

        setScroll();
    };

    expand.addEventListener('scroll', onScroll);
    shrink.addEventListener('scroll', onScroll);
};

Bagaimana cara menggunakannya:

let container = document.querySelector(".container");
new ResizeSensor(container, function()
{
    console.log("dimension changed:", container.clientWidth, container.clientHeight);
});

Saya TIDAK merekomendasikan hack setTimeout() karena memperlambat kinerja! Sebagai gantinya, Anda dapat menggunakan pengamat mutasi DOM untuk mendengarkan perubahan ukuran Div.

JS:

var observer = new MutationObserver(function(mutations) {
    console.log('size changed!');
  });
  var target = document.querySelector('.mydiv');
  observer.observe(target, {
    attributes: true
  });

HTML:

<div class='mydiv'>
</div>

Ini biola
Cobalah untuk mengubah ukuran div.

Anda selanjutnya dapat membungkus metode Anda dalam metode debounce untuk meningkatkan efisiensi. debounce akan memicu metode Anda setiap x milidetik alih-alih memicu setiap milidetik, ukuran sedang dirubah.

Hanya objek window yang menghasilkan event "resize". Satu-satunya cara saya tahu untuk melakukan apa yang ingin Anda lakukan adalah menjalankan penghitung waktu interval yang secara berkala memeriksa ukurannya.

Anda dapat menggunakan iframe atau object menggunakan contentWindow atau contentDocument pada ukuran. Tanpa setInterval atau setTimeout

Langkah langkah:

Atur posisi elemen Anda ke relative
Tambahkan di dalam IFRAME tersembunyi mutlak transparan
Dengarkan IFRAME.contentWindow - onresize acara

Contoh HTML:

<div style="height:50px;background-color:red;position:relative;border:1px solid red">
<iframe style=width:100%;height:100%;position:absolute;border:none;background-color:transparent allowtransparency=true>
</iframe>
This is my div
</div>

Javascript:

$('div').width(100).height(100);
$('div').animate({width:200},2000);

$('object').attr({
    type : 'text/html'
})
$('object').on('resize,onresize,load,onload',function(){
    console.log('ooooooooonload')
})

$($('iframe')[0].contentWindow).on('resize',function(){
    console.log('div changed')
})

Contoh Menjalankan

JsFiddle: https://jsfiddle.net/qq8p470d/

Lihat lebih lanjut:

Clay - Ini berdasarkan element-resize-event
element-resize-event

var div = document.getElementById('div');
div.addEventListener('resize', (event) => console.log(event.detail));

function checkResize (mutations) {
    var el = mutations[0].target;
    var w = el.clientWidth;
    var h = el.clientHeight;
    
    var isChange = mutations
      .map((m) => m.oldValue + '')
      .some((prev) => prev.indexOf('width: ' + w + 'px') == -1 || prev.indexOf('height: ' + h + 'px') == -1);

    if (!isChange)
      return;

    var event = new CustomEvent('resize', {detail: {width: w, height: h}});
    el.dispatchEvent(event);
}

var observer = new MutationObserver(checkResize); 
observer.observe(div, {attributes: true, attributeOldValue: true, attributeFilter: ['style']});

#div {width: 100px; border: 1px solid #bbb; resize: both; overflow: hidden;}

<div id = "div">DIV</div>

Posting blog ini membantu saya mendeteksi perubahan ukuran pada elemen DOM secara efisien.

http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

Cara menggunakan kode ini ...

AppConfig.addResizeListener(document.getElementById('id'), function () {
  //Your code to execute on resize.
});

Kode paket yang digunakan oleh contoh ...

var AppConfig = AppConfig || {};
AppConfig.ResizeListener = (function () {
    var attachEvent = document.attachEvent;
    var isIE = navigator.userAgent.match(/Trident/);
    var requestFrame = (function () {
        var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
            function (fn) { return window.setTimeout(fn, 20); };
        return function (fn) { return raf(fn); };
    })();

    var cancelFrame = (function () {
        var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
               window.clearTimeout;
        return function (id) { return cancel(id); };
    })();

    function resizeListener(e) {
        var win = e.target || e.srcElement;
        if (win.__resizeRAF__) cancelFrame(win.__resizeRAF__);
        win.__resizeRAF__ = requestFrame(function () {
            var trigger = win.__resizeTrigger__;
            trigger.__resizeListeners__.forEach(function (fn) {
                fn.call(trigger, e);
            });
        });
    }

    function objectLoad(e) {
        this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
        this.contentDocument.defaultView.addEventListener('resize', resizeListener);
    }

    AppConfig.addResizeListener = function (element, fn) {
        if (!element.__resizeListeners__) {
            element.__resizeListeners__ = [];
            if (attachEvent) {
                element.__resizeTrigger__ = element;
                element.attachEvent('onresize', resizeListener);
            } else {
                if (getComputedStyle(element).position === 'static') element.style.position = 'relative';
                var obj = element.__resizeTrigger__ = document.createElement('object');
                obj.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
                obj.__resizeElement__ = element;
                obj.onload = objectLoad;
                obj.type = 'text/html';
                if (isIE) element.appendChild(obj);
                obj.data = 'about:blank';
                if (!isIE) element.appendChild(obj);
            }
        }
        element.__resizeListeners__.Push(fn);
    };

    AppConfig.removeResizeListener = function (element, fn) {
        element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
        if (!element.__resizeListeners__.length) {
            if (attachEvent) element.detachEvent('onresize', resizeListener);
            else {
                element.__resizeTrigger__.contentDocument.defaultView.removeEventListener('resize', resizeListener);
                element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
            }
        }
    }
})();

Catatan: AppConfig adalah namespace/objek yang saya gunakan untuk mengatur fungsi yang dapat digunakan kembali. Jangan ragu untuk mencari dan mengganti nama dengan apa pun yang Anda inginkan.

Anda dapat mencoba kode di cuplikan berikut, mencakup kebutuhan Anda menggunakan javascript biasa. (jalankan cuplikan kode dan klik tautan satu halaman penuh untuk memicu peringatan bahwa div diubah ukurannya jika Anda ingin mengujinya.).

Berdasarkan fakta bahwa ini adalah setInterval dari 100 milidetik, saya berani mengatakan bahwa PC saya tidak merasa terlalu lapar CPU. (0,1% CPU digunakan sebagai total untuk semua tab yang dibuka di Chrome pada saat diuji.). Tapi sekali lagi ini hanya untuk satu div, jika Anda ingin melakukan ini untuk sejumlah besar elemen maka ya itu bisa sangat lapar CPU.
Anda selalu dapat menggunakan acara klik untuk menghentikan div-resize sniffing.

var width = 0; 
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
} 
if(document.getElementById("test_div").clientWidth!==width) {   
  alert('resized div');
  width = document.getElementById("test_div").clientWidth;
}    

}, 100);

<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
</div>

Anda dapat memeriksa biola juga

PERBARUI

var width = 0; 
function myInterval() {
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
} 
if(document.getElementById("test_div").clientWidth!==width) {   
  alert('resized');
  width = document.getElementById("test_div").clientWidth;
}    

}, 100);
return interval;
}
var interval = myInterval();
document.getElementById("clickMe").addEventListener( "click" , function() {
if(typeof interval!=="undefined") {
clearInterval(interval);
alert("stopped div-resize sniffing");
}
});
document.getElementById("clickMeToo").addEventListener( "click" , function() {
myInterval();
alert("started div-resize sniffing");
});

<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" id="clickMe" />
        <input type="button" value="button 2" id="clickMeToo" />
        <input type="button" value="button 3" />
</div>

Diperbarui Fiddle

Menggunakan Clay.js ( https://github.com/zzarcon/clay ) cukup mudah untuk mendeteksi perubahan pada ukuran elemen:

var el = new Clay('.element');

el.on('resize', function(size) {
    console.log(size.height, size.width);
});

Hebatnya setua masalah ini, ini masih menjadi masalah di sebagian besar browser.

Seperti yang orang lain katakan, Chrome 64+ sekarang dikirimkan dengan Resize Observes secara asli, namun, spesifikasi tersebut masih sedang diperbaiki dan Chrome sekarang sedang (pada 2019-01-29) di belakang edisi terbaru dari spesifikasi .

Saya telah melihat beberapa polyfill ResizeObserver yang baik di alam bebas, namun beberapa tidak mengikuti spesifikasi yang erat dan yang lain memiliki beberapa masalah perhitungan.

Saya sangat membutuhkan perilaku ini untuk membuat beberapa komponen web responsif yang dapat digunakan dalam aplikasi apa pun. Untuk membuatnya bekerja dengan baik, mereka perlu mengetahui dimensi mereka setiap saat, jadi ResizeObservers terdengar ideal dan saya memutuskan untuk membuat polyfill yang mengikuti spesifikasi sedekat mungkin.

Repo: https://github.com/juggle/resize-observer

Demo: https://codesandbox.io/s/myqzvpmmy9

Ini adalah salinan tepat dari jawaban teratas, tetapi alih-alih sebuah tautan, itu hanya bagian dari kode yang penting, diterjemahkan menjadi IMO lebih mudah dibaca dan lebih mudah dipahami. Beberapa perubahan kecil lainnya termasuk menggunakan cloneNode (), dan tidak menempatkan html ke string js. Hal-hal kecil, tetapi Anda dapat menyalin dan menempel ini apa adanya dan itu akan berhasil.

Cara kerjanya adalah dengan membuat dua div tak terlihat mengisi elemen yang Anda tonton, lalu menempatkan pemicu di masing-masing, dan mengatur posisi gulir yang akan memicu pemicu perubahan gulir jika ukurannya berubah.

Semua kredit nyata diberikan kepada Marc J, tetapi jika Anda hanya mencari kode yang relevan, ini dia:

    window.El = {}

    El.resizeSensorNode = undefined;
    El.initResizeNode = function() {
        var fillParent = "display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;";
        var triggerStyle = "position: absolute; left: 0; top: 0; transition: 0s;";

        var resizeSensor = El.resizeSensorNode = document.createElement("resizeSensor");
        resizeSensor.style = fillParent;

        var expandSensor = document.createElement("div");
        expandSensor.style = fillParent;
        resizeSensor.appendChild(expandSensor);

        var trigger = document.createElement("div");
        trigger.style = triggerStyle;
        expandSensor.appendChild(trigger);

        var shrinkSensor = expandSensor.cloneNode(true);
        shrinkSensor.firstChild.style = triggerStyle + " width: 200%; height: 200%";
        resizeSensor.appendChild(shrinkSensor);
    }


    El.onSizeChange = function(domNode, fn) {
        if (!domNode) return;
        if (domNode.resizeListeners) {
            domNode.resizeListeners.Push(fn);
            return;
        }

        domNode.resizeListeners = [];
        domNode.resizeListeners.Push(fn);

        if(El.resizeSensorNode == undefined)
            El.initResizeNode();

        domNode.resizeSensor = El.resizeSensorNode.cloneNode(true);
        domNode.appendChild(domNode.resizeSensor);

        var expand = domNode.resizeSensor.firstChild;
        var expandTrigger = expand.firstChild;
        var shrink = domNode.resizeSensor.childNodes[1];

        var reset = function() {
            expandTrigger.style.width = '100000px';
            expandTrigger.style.height = '100000px';

            expand.scrollLeft = 100000;
            expand.scrollTop = 100000;

            shrink.scrollLeft = 100000;
            shrink.scrollTop = 100000;
        };

        reset();

        var hasChanged, frameRequest, newWidth, newHeight;
        var lastWidth = domNode.offsetWidth;
        var lastHeight = domNode.offsetHeight;


        var onResized = function() {
            frameRequest = undefined;

            if (!hasChanged) return;

            lastWidth = newWidth;
            lastHeight = newHeight;

            var listeners = domNode.resizeListeners;
            for(var i = 0; listeners && i < listeners.length; i++) 
                listeners[i]();
        };

        var onScroll = function() {
            newWidth = domNode.offsetWidth;
            newHeight = domNode.offsetHeight;
            hasChanged = newWidth != lastWidth || newHeight != lastHeight;

            if (hasChanged && !frameRequest) {
                frameRequest = requestAnimationFrame(onResized);
            }

            reset();
        };


        expand.addEventListener("scroll", onScroll);
        shrink.addEventListener("scroll", onScroll);
    }

menggunakan Bharat Patil jawab cukup kembalikan salah di dalam callback bind Anda untuk mencegah kesalahan tumpukan maksimum, lihat contoh di bawah:

$('#test_div').bind('resize', function(){
   console.log('resized');
   return false;
});

Solusi Javascript murni, tetapi hanya berfungsi jika elemen tersebut diubah ukurannya dengan tombol css resize :

ukuran elemen toko dengan offsetWidth dan offsetHeight ;
tambahkan onclick event listener pada elemen ini;
ketika dipicu, bandingkan curent offsetWidth dan offsetHeight dengan nilai yang disimpan, dan jika berbeda, lakukan apa yang Anda inginkan dan perbarui nilai-nilai ini.

jQuery(document).ready( function($) {

function resizeMapDIVs() {

// check the parent value...

var size = $('#map').parent().width();



if( $size < 640 ) {

//  ...and decrease...

} else {

//  ..or increase  as necessary

}

}

resizeMapDIVs();

$(window).resize(resizeMapDIVs);

});

Ini adalah pertanyaan yang sangat lama, tetapi saya pikir saya akan memposting solusi saya untuk ini.

Saya mencoba menggunakan ResizeSensor karena semua orang naksirnya cukup besar. Setelah menerapkan meskipun, saya menyadari bahwa di bawah tenda Elemen Query membutuhkan elemen yang bersangkutan untuk memiliki posisi relative atau absolute diterapkan untuk itu, yang tidak berfungsi untuk situasi saya.

Saya akhirnya menangani ini dengan Rxjs interval bukannya setTimeout lurus atau requestAnimationFrame seperti implementasi sebelumnya.

Apa yang menyenangkan tentang aroma yang bisa diamati dari suatu interval adalah Anda bisa memodifikasi alirannya, tetapi setiap pengamatan lain dapat diatasi. Bagi saya, implementasi dasar sudah cukup, tetapi Anda bisa menjadi gila dan melakukan segala macam penggabungan, dll.

Dalam contoh di bawah ini, saya melacak perubahan lebar div bagian dalam (hijau). Ini memiliki lebar yang diatur ke 50%, tetapi lebar maks 200px. Menyeret slider mempengaruhi lebar div pembungkus (abu-abu). Anda dapat melihat bahwa api yang dapat diamati hanya menyala ketika lebar div dalam berubah, yang hanya terjadi jika lebar div luar lebih kecil dari 400px.

const { interval } = rxjs;
const { distinctUntilChanged, map, filter } = rxjs.operators;


const wrapper = document.getElementById('my-wrapper');
const input = document.getElementById('width-input');




function subscribeToResize() {
  const timer = interval(100);
  const myDiv = document.getElementById('my-div');
  const widthElement = document.getElementById('width');
  const isMax = document.getElementById('is-max');
  
  /*
    NOTE: This is the important bit here 
  */
  timer
    .pipe(
      map(() => myDiv ? Math.round(myDiv.getBoundingClientRect().width) : 0),
      distinctUntilChanged(),
      // adding a takeUntil(), here as well would allow cleanup when the component is destroyed
    )
      .subscribe((width) => {        
        widthElement.innerHTML = width;
        isMax.innerHTML = width === 200 ? 'Max width' : '50% width';

      });
}

function defineRange() {
  input.min = 200;
  input.max = window.innerWidth;
  input.step = 10;
  input.value = input.max - 50;
}

function bindInputToWrapper() {
  input.addEventListener('input', (event) => {
    wrapper.style.width = `${event.target.value}px`;
  });
}

defineRange();
subscribeToResize();
bindInputToWrapper();

.inner {
  width: 50%;
  max-width: 200px;
}




/* Aesthetic styles only */

.inner {
  background: #16a085;
}

.wrapper {
  background: #ecf0f1;
  color: white;
  margin-top: 24px;
}

.content {
  padding: 12px;
}

body {
  
  font-family: sans-serif;
  font-weight: bold;
}

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

<h2>Resize Browser width</h2>

<label for="width-input">Adjust the width of the wrapper element</label>
<div>
  <input type="range" id="width-input">
</div>

<div id="my-wrapper" class="wrapper">
  <div id="my-div" class="inner">
    <div class="content">
      Width: <span id="width"></span>px
      <div id="is-max"></div>  
    </div>
  </div>
</div>

Apa itu DOM dalam JavaScript?

DOM merupakan kependekan dari Document Object Model, DOM ini yakni object model standar bagi XML dan HTML yang memiliki sifat platform independent. Saat membuka sebuah halaman web pada browser, maka file HTML dari web akan dimuat serta ditampilkan pada layar perangkat.

Bagaimana cara memanggil fungsi di JavaScript?

Cara Memanggil/Eksekusi Fungsi Kita bisa memanggil fungsi di dalam kode Javascript dengan menuliskan nama fungsinya seperti ini: namaFungsi(); Contoh: // membuat fungsi function sayHello(){ console.log("Hello World!"); } // memanggil fungsi sayHello() // maka akan menghasilkan -> Hello World!

Apa itu DOM JavaScript dan bagaimana model implementasinya?

Javascript DOM (Document Object Model) adalah interface yang memungkinkan developer untuk memanipulasi konten, struktur, dan style situs web. Jika Anda ingin mempelajari lebih dalam tentang DOM dan bagaimana Anda dapat memanipulasinya menggunakan Javascript, berikut referensi dasar menurut Gabriel Tanner.

Di dalam elemen HTML manakah kita meletakkan JavaScript?

Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag <head> di antara <body>