首頁 > web前端 > css教學 > 主體

css如何取得圖片的寬度

藏色散人
發布: 2023-01-04 09:36:43
原創
4893 人瀏覽過

css取得圖片寬度的方法:先建立一個HTML範例檔案;然後透過JavaScript clientWidth和clientHeight屬性來取得圖片的寬度即可。

css如何取得圖片的寬度

本教學操作環境:windows7系統、css3版、thinkpad t480電腦。

推薦:《css影片教學

在html/css中,想要取得圖片目前寬高可以使用JavaScript clientWidth和clientHeight屬性來實現。 clientWidth、clientHeight屬性表示取得影像的目前寬度和高度。

css如何取得圖片的寬度

下面我們就結合具體的程式碼範例,跟大家介紹JS取得圖片目前寬高的方法。

程式碼實例如下:




    
    js获取当前图片宽高的示例
    

css如何取得圖片的寬度

登入後複製

當我們點擊取得按鈕時,就會呼叫上述定義的imgSize()方法,其中querySelector() 方法可以取得文件中id="sky" 的元素,也就是取得的img圖片。然後透過.clientWidth 和clientHeight屬性來取得元素的目前寬度和高度(單位:像素)。

這裡的img圖片,我們為它增加了一個width屬性為250px,高度為自適應。

最終效果如下圖所示:

css如何取得圖片的寬度

附註:

clientWidth 屬性表示元素的內部寬度。此屬性包括內邊距,但不包括垂直捲軸(如果有)、邊框和外邊距,其屬性值會被四捨五入為整數。

clientHeight 可以透過CSS height CSS padding - 水平滾動條高度(如果存在)來計算.這個屬性是唯讀屬性,對於沒有定義CSS或內聯佈局盒子的元素為0,否則,它是元素內部的高度(單位像素),包含內邊距,但不包括水平捲軸、邊框和外邊距。

以上是css如何取得圖片的寬度的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!