当在Javascript中定义为百分比时，获取节点/元素的正确宽度和高度

Question

Solved using getBoundingClientRect; Thanks snapjs for the comment

---

I want to do a cropper similar to https://codepen.io/joshhunt18/pen/NPKEzQ .

In my case the cropper is open in a modal after the image is loaded. Because the images can have different ratio I want to change the image width and height to be inside the modal_area.

My issues, is that in JavaScript when I try to get the width,height of the model_area(image container) I don't get the real width/height if is defined in percents. I think is taking the parent width and height.

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0;
}


.modal-area {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    padding: 30px;
    background-color: blue;
    border-radius: 4px;
    box-shadow: 0 0 50px black;
    z-index: 20;
    overflow: hidden;
}

Javascript:

function add_new_image(data, formset) {
        var file = data.files[0];
        var reader = new FileReader();
        var modal_DOM_ref, modal_area_DOM_ref;
        reader.onload = function (event) {
            var img = new Image();
            // ratio = img.width / img.height;
            // get the modal and make visible
             modal_DOM_ref = get_modal(formset);
             modal_area_DOM_ref = get_modal_content(modal_DOM_ref);
              make_modal_visible(modal_DOM_ref);
             //check ratio width/height to see who is bigger
             img.onload = function() {if( modal_area_DOM_ref.offsetWidth/img.width > modal_area_DOM_ref.offsetHeight/img.height){

                 img.style.width = img.width * (modal_area_DOM_ref.offsetWidth/img.width) + 'px';
                 img.style.height = img.height * (modal_area_DOM_ref.offsetWidth/img.width) + 'px';
             }
             else {
                 console.log('b',img.width, img.height,  (modal_area_DOM_ref.offsetHeight/img.height));
                 img.style.width = img.width * (modal_area_DOM_ref.offsetHeight/img.height) + 'px';

                 img.style.height = img.height * (modal_area_DOM_ref.offsetHeight/img.height) + 'px';
             }}
             img.src = event.target.result;
            // add the image
            modal_area_DOM_ref.appendChild(img);

        };
        reader.readAsDataURL(file);
    }

Answer 1

style properties are mapped with style attribute.

 var elem = document.getElementById('B'); // without border height console.log('clientWidth: ' + elem.clientWidth); console.log('clientHeight: ' + elem.clientHeight); // with border height console.log('offsetWidth: ' + elem.offsetWidth); console.log('offsetHeight: ' + elem.offsetHeight); 

 div{ border: 3px solid black; } div#A{ width: 500px; height: 500px; } div#B{ width: 30%; height: 46%; } 

 <div id="A"> <div id="B"></div> </div>