получить новое значение div в функции - PullRequest
Новая
       25

получить новое значение div в функции

0 голосов
/ 05 июля 2019

Я хочу получить ширину и высоту отображаемого изображения внутри обёртки, чтобы что-то с ним делать.Изображение не отображается при выборе, поэтому размер оболочки изменяется.Так как мне нужен размер обертки для других вещей, я использую его в качестве параметров.Таким образом, после обновления изображения я получаю высоту и ширину упаковщика старых изображений.Итак, как я могу изменить свой код, чтобы получить новые размеры оболочки после отображения нового изображения?

(мне не нужна информация об отправке или что-то в этом роде. Это сокращенная версия кода.) 

<div style="width:300px">
        <div id="image-wrapper" style="border:2px dashed blue">
            <img src="text.jpeg" id="image" style="width:100%">
        </div>
        <p>width: <span id="x"></span></p>
        <p>height: <span id="y"></span></p>
    </div>
    <form method="POST" enctype="multipart/form-data">
        <input type="file" id="user-file" accept="image/jpeg, image/jpg, image/png, image/gif" onchange="Image.display(this, document.getElementById('image'));Image.ready(document.getElementById('image-wrapper'),document.getElementById('x'),document.getElementById('y'))">
        <button type="submit">Submit
        </button>
    </form>
<script>
    class Image {
        static display ( event, target ) {
            if ( event.files[0] ) {
                let fileReader = new FileReader();
                fileReader.onload = function (event) {
                    target.setAttribute( 'src', event.target.result );
                }
                fileReader.readAsDataURL(event.files[0]);
            }
        }

        static ready (wrapper, x, y) {
            x.innerHTML = wrapper.clientWidth;
            y.innerHTML = wrapper.clientHeight;
        }
    }
</script>

Ответы [ 2 ]

1 голос
/ 05 июля 2019

РЕДАКТИРОВАНИЕ : Вам нужно дождаться загрузки изображения, а затем вызвать ваш метод ready! 

<div style="width:300px">
        <div id="image-wrapper" style="border:2px dashed blue">
            <img src="text.jpeg" id="image" style="width:100%" onload="Image.ready(document.getElementById('image-wrapper'),document.getElementById('x'),document.getElementById('y'))">
        </div>
        <p>width: <span id="x"></span></p>
        <p>height: <span id="y"></span></p>
    </div>
    <form method="POST" enctype="multipart/form-data">
        <input type="file" id="user-file" accept="image/jpeg, image/jpg, image/png, image/gif" onchange="Image.display(this, document.getElementById('image'));">
        <button type="submit">Submit
        </button>
    </form>
<script>
    class Image {
        static display ( event, target ) {
            if ( event.files[0] ) {
                let fileReader = new FileReader();
                fileReader.onload = function (event) {
                    target.setAttribute( 'src', event.target.result );
                }
                fileReader.readAsDataURL(event.files[0]);
            }
        }

        static ready (wrapper, x, y) {
            x.innerHTML = wrapper.clientWidth;
            y.innerHTML = wrapper.clientHeight;
        }
    }
</script>
0 голосов
/ 05 июля 2019

Попробуйте получить доступ к свойству изображения width, clientWidth или offsetWidth вместо оболочки.

...