如何使用JavaScript獲取圖像大小(高度和寬度)?

爲了使用JavaScript獲取圖像大小(高度和寬度),可使用Element.clientHeight和Element.clientWidth屬性。下面本篇文章就來給大家介紹一下,希望對大家有所幫助。

如何使用JavaScript獲取圖像大小(高度和寬度)?
原文地址:如何使用JavaScript獲取圖像大小(高度和寬度)?
Element.clientHeight:我們可以使用此屬性訪問元素的內部高度。此高度包括填充,但不包括邊距和邊框。

Element.clientWidth:我們可以使用此屬性訪問元素的內部寬度。此寬度包括填充,但不包括邊距和邊框。

注意:這裏的元素是image,所以image.clientheightimage.clientwidth將分別用於獲取圖像的高度和寬度。

示例:獲取圖像大小

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用javascript獲取高寬圖像</title>
        <style>
            h1 {
                text-align: center;
                letter-spacing: 1px;
            }

            img,
            button {
                width: 400px;
                display: block;
                margin: 0 auto;
            }

            button {
                font-size: large;
            }
        </style>
    </head>

    <body>

        <h1>獲取圖像的高度和寬度</h1>
        <img src="1.jpg" alt="logo" id="image"><br />
        <button type="submit" onclick="myFunc()">獲取高度和寬度</button>

        <div style="background-color: lightgray">
            <div id="height"></div>
            <div id="width"></div>
        </div>
    </body>

    <script>
        function myFunc() {
            let image = document.getElementById('image');
            let height = document.getElementById('height');
            var width = document.getElementById('width');

            height.innerHTML += '<h1>圖像高度爲:' +
                image.clientHeight + 'px </h1>';

            width.innerHTML += '<h1>圖像寬度爲:' +
                image.clientWidth + 'px </h1>';
        }
    </script>

</html>

效果圖:

如何使用JavaScript獲取圖像大小(高度和寬度)?

推薦閱讀:

php服務器

php5下載

layui框架

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章