JavaScript DOM元素尺寸和位置_基础知识
一 获取元素的CSS大小
1.通过style内联获取元素的大小
var box = document.getElementById('box'); // 获得元素;
box.style.width; // 200px;
box.style.height; // 200px;
// PS:style获取只能取到行内style属性的CSS样式中的宽和高,如果有,则获取;如果没有则返回空;
2.通过计算获取元素的大小
var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;
style.width; // 200px;
// PS:通过计算获取元素的大小,无关是行内/内联或链接,它返回经过计算后的结果;
// 如果本身设置大小,它会返回元素的大小;如果本身没有设置,非IE会返回默认的大小,IE会返回auto;
3.通过CSSStyleSheet对象中的cssRules(或rules)属性获取元素的大小;
var sheet = document.styleSheets[0]; // 获取link或style;
var rule = (sheet.cssRules || sheet.rules)[0]; // 获取第一条规则;
rule.style.width; // 200px;
PS:cssRules只能获取到内联和链接样式的宽和高,不能获取到行内和计算后的样式;
总结:以上三种CSS获取元素大小的方法,只能获取元素的CSS大小,却无法获取元素本身实际的大小;比如加上内边距/滚动条/边框之类的;
二 获取元素实际大小
1.clientWidth和clientHeight
这组属性可以获取元素可视区的大小,包含元素内容及内边距所占据的空间大小;
box.clientWidth; // 200;
PS:返回了元素大小,但没有单位,默认单位是px;
PS:对于元素的实际大小,clientWidth和clientHeight理解如下:
1.元素增加边框,无变化,200;
2.元素增加外边框,无变化,200;
3.增加滚动条,最终值=原本大小-滚动条大小;184;
4.增加内边距,最终值=原本大小+内边距大小;220;
PS:如果没有设置任何CSS的width和height,那么非IE会算上滚动条和内边距的计算后的大小;而IE则返回0;
2.scrollWidth和scrollHeight
这组属性可以获取没有滚动条的情况下,元素内容的总高度;
box.scrollWidth;
// PS:返回了元素大小,默认单位是px;如果没有设置任何CSS的width和height,它会得到计算后的宽度和高度;
3.offsetWidth和offsetHeight
这组属性可以返回元素实际大小,包含边框/内边距和滚动条;
box.offsetWidth; 200
PS:返回了元素大小,默认单位是px;如果没有设置任何CSS的width和height,它会得到计算后的宽度和高度;
PS:对于元素的实际大小,理解如下:
1.增加边框,最终值=原本大小+边框大小;220;
2.增加内边距,最终值=原本大小+内边距大小;220;
3.增加外边据,无变化;
4.增加滚动条,无变化,不会减小;
PS:对于元素大小的获取,一般是块级(block)元素并且已设置了CSS大小的元素较为方便;
三 获取元素周边大小
1.clientLeft和clientTop
// 这组属性可以获取元素设置了左边框和上边框的大小;
box.clientLeft; // 获取左边框的宽度;
2.offsetLeft和offsetTop(偏移量)
// 这组属性可以获取当前元素边框相对于父元素边框的位置;
box.offsetLeft; // 50;
// PS:获取元素当前相对于父元素的位置,最好将它设置为定位position:absolute;
// PS:加上边框和内边距不会影响它的位置,但加上外边据会累加;
box.offsetParent; // 得到父元素;
// PS:offsetParent中,如果本身父元素是<body>,非IE返回body对象,IE返回html对象;
// 如果两个元素嵌套,如果上级父元素没有使用定位position:absolute,那么offsetParent将返回body或html对象;
// 如果说在很多层次里,外层已经定位,获取任意一个元素距离页面上的位置,可以不停的向上回溯获取累加来实现;
box.offsetTop+box.offsetParent.offsetTop; // 只有两层的情况下;
// 如果多层的话,就必须使用循环或递归;
function offsetLeft(element){
var left = element.offsetLeft; // 得到第一层距离;
var parent = element.offsetParent; // 得到第一个父元素;
while(parent !== null){ // 判断如果还有上一层父元素;
left += parent.offsetLeft; // 将得到的距离累加;
parent = parent.offsetParent; // 将父元素也回溯;
} // 然后循环;
return left; // 得到最终距离;
}
3.scrollTop和scrollLeft
// 这组属性可以获取被滚动条隐藏的区域大小,也可设置定位到该区域;
box.scrollTop; // 获取滚动内容上方的位置;
// 设置滚动条滚动到最初始的位置;
function scrollStart(element){
if(element.scrollTop != 0){
element.scrollTop = 0;
}
}四 getBoundingClientRect()方法
// 这个方法返回一个矩形对象,包含四个属性:left/top/right和bottom;
// 分别表示元素各边与页面上边和左边的距离;
var box = document.getElementById('box');
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离;
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离;
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离;
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离;
// PS:IE/Firefox/Opera/Chrome/Safari都支持;
// 但在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素;
document.documentElement.clientTop; // 非IE为0,IE为2;
document.documentElement.clientLeft; // 非IE为0,IE为2;
// 兼容getBoundingClientRect()
function getRect(element){
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left = document.documentElement.clientLeft;
return {
top:rect.top-top, // 元素上边距-页面的上边距(0-0或2-2);
bottom:rect.bottom-top,
left:rect.left-left, // 元素左边距-页面的左边距(0-0或2-2);
right:rect.right-left
}
};五 小结
1.偏移量(offset dimension):包括元素在屏幕上占用的所有可见的空间;
元素的可见大小由其高度和宽度决定,包括内边距/滚动条和边框;
2.客户区大小(client dimension):指的是元素内容及其内边距所占据的空间大小;
3.滚动大小(scroll dimension):包含滚动内容的元素的大小;
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1389
52
Butiran tentang cara menghidupkan tetapan pembolehubah persekitaran pada Windows 11
Dec 30, 2023 pm 06:07 PM
Fungsi pembolehubah persekitaran adalah alat penting untuk menjalankan program konfigurasi dalam sistem Walau bagaimanapun, dalam sistem win11 terkini, masih terdapat ramai pengguna yang tidak tahu bagaimana untuk menetapkan dan membukanya lokasi pembukaan pembolehubah persekitaran win11 Marilah sertai kami. Di manakah pembolehubah persekitaran win11: 1. Mula-mula masukkan "win+R" untuk membuka kotak larian. 2. Kemudian masukkan arahan: controlsystem. 3. Dalam antara muka maklumat sistem yang terbuka, pilih "Tetapan Sistem Lanjutan" dari menu kiri. 4. Kemudian pilih pilihan "Pembolehubah Persekitaran" di bahagian bawah tetingkap "System Properties" yang terbuka. 5. Akhir sekali, dalam pembolehubah persekitaran yang dibuka, anda boleh membuat tetapan yang berkaitan mengikut keperluan anda.
Laluan permulaan Win11 dan cara membukanya
Jan 03, 2024 pm 11:13 PM
Setiap sistem Windows mempunyai laluan permulaan Jika anda menambah fail atau perisian padanya, ia akan dibuka pada masa but. Walau bagaimanapun, ramai rakan tidak tahu di mana laluan permulaan win11 sebenarnya, kita hanya perlu memasukkan folder yang sepadan pada pemacu C. Laluan permulaan Win11: 1. Klik dua kali untuk membuka "PC ini" 2. Tampal terus laluan "C:\ProgramData\Microsoft\Windows\StartMenu\Programs\Startup" ke dalam kotak laluan. 3. Berikut ialah laluan permulaan win11 Jika kita ingin membuka fail selepas boot, kita boleh memasukkan fail tersebut. 4. Jika anda tidak boleh masuk mengikut laluan ini, ia mungkin tersembunyi.
di manakah pengurus kelayakan windows10
Jul 09, 2023 am 10:09 AM
Pengurus Kredensial ialah fungsi yang digunakan oleh pengguna untuk mengurus bukti kelayakan web dan bukti kelayakan Windows, tetapi ramai pengguna masih tidak tahu di mana Pengurus Kredensial Windows 10 berada. Sebenarnya, pengurus kelayakan berada di panel operasi Selepas membuka panel kawalan, ingat untuk menukar kaedah tontonan kepada ikon kecil, supaya anda boleh melihat pengurus kelayakan untuk melihat sejumlah besar , anda perlu memasukkan kata laluan akaun. Di manakah Pengurus Kredensial Windows 10: 1. Buka Panel Kawalan dalam sistem, klik kaedah Lihat di penjuru kanan sebelah atas, dan tukar jenis kepada ikon kecil. 2. Selepas melihatnya sebagai ikon kecil, klik "Pengurus Sijil". 3. Selepas memasukkan pengurus kelayakan, anda boleh melihat pengenalan kepada fungsi yang berkaitan, yang digunakan terutamanya untuk
Lokasi Burung Origami di Taman Filem dan Televisyen Stardome Railway Crocker
Mar 27, 2024 pm 11:51 PM
Terdapat sejumlah 20 burung origami di Taman Filem dan Televisyen Croaker di Star Dome Railway Ramai pemain tidak tahu di mana burung origami berada di Taman Filem dan Televisyen Crocker. Editor telah meringkaskan lokasi setiap burung origami untuk membantu semua orang . Carinya, dan lihat ringkasan terkini lokasi burung origami di Taman Filem dan Televisyen Croaker untuk kandungan tertentu. Panduan ke Kereta Api Kubah Bintang Honkai: Burung Origami di Crook Movie Park Lokasi 1, Crook Movie Park Tingkat 1 2 dan Crook Movie Park Tingkat 2 Star Dome Railway
Fahami lokasi dan struktur penyimpanan pakej pemasangan pip
Jan 18, 2024 am 08:23 AM
Untuk mengetahui lebih lanjut tentang lokasi storan pakej yang dipasang oleh pip, anda memerlukan contoh kod khusus Pip ialah alat pengurusan pakej yang biasa digunakan dalam bahasa Python Ia digunakan untuk memasang, meningkatkan dan mengurus pakej Python dengan mudah. Apabila menggunakan pip untuk memasang pakej, ia akan memuat turun fail pakej yang sepadan secara automatik daripada PyPI (Python Package Index) dan memasangnya ke lokasi yang ditentukan. Jadi, di manakah pakej yang dipasang oleh pip disimpan? Ini adalah masalah yang akan dihadapi oleh ramai pembangun Python. Artikel ini akan menyelidiki lokasi pakej yang dipasang oleh pip dan menyediakan
lokasi penutupan win11
Jan 10, 2024 am 09:14 AM
Jika kita akan berada jauh dari komputer untuk masa yang lama, adalah lebih baik untuk menutup komputer untuk melindunginya Jadi di manakah penutupan dalam win11 Sebenarnya, secara umum, buka menu mula dan anda boleh mencari butang tutup di dalamnya. Di mana untuk menutup Windows 11: Jawapan: Dalam butang kuasa menu mula. 1. Mula-mula, kami klik "Logo Windows" pada bar tugas bawah untuk membuka "Menu Mula" 2. Selepas membuka, anda boleh mencari butang "Kuasa" di sudut kanan bawah, seperti yang ditunjukkan dalam rajah. 3. Selepas mengklik butang kuasa, anda akan melihat "Shutdown", klik padanya untuk menutup. 4. Jika komputer tidak dapat dimatikan disebabkan oleh keadaan khusus seperti ranap sistem, anda boleh terus menekan dan menahan "butang kuasa" pada komputer untuk menutup paksa.
Menggunakan Ciri Daftar Masuk Apple: Panduan untuk Apl Mesej dalam iOS 17
Sep 14, 2023 pm 09:13 PM
Apple dalam iOS 17 telah menambah ciri baharu dalam Messages untuk memberitahu orang tersayang apabila anda pulang dengan selamat. Ia dipanggil daftar masuk, dan inilah cara anda menggunakannya. Sama ada anda berjalan kaki pulang ke rumah selepas gelap atau pergi berlari awal pagi, anda boleh mula mendaftar masuk dengan keluarga atau rakan dalam apl Mesej Apple untuk memberitahu mereka apabila anda selamat di rumah. Semasa ketibaan anda, Daftar Masuk secara automatik mengesan apabila anda berada di rumah dan memberitahu rakan anda. Apabila mereka menerima makluman dan daftar masuk telah tamat, anda juga akan dimaklumkan. Jika sesuatu yang tidak dijangka berlaku dan anda terlewat dalam perjalanan, CheckTab akan menyedari bahawa anda tidak membuat kemajuan dan mendaftar masuk dengan anda, bertanya sama ada anda ingin meningkatkan ETA anda. jika anda tidak mempunyai
Di manakah Kuaishou diterbitkan dan bagaimana untuk menukar lokasinya? Bagaimana untuk menambah lokasi pada video yang telah dimuat naik?
Mar 21, 2024 pm 06:00 PM
Sebagai platform video pendek yang terkenal di China, Kuaishou menyediakan banyak pencipta peluang untuk mempamerkan bakat mereka dan berkongsi kehidupan mereka. Semasa memuat naik video, sesetengah pencipta pemula mungkin keliru tentang cara menukar lokasi siaran video. Artikel ini akan memperkenalkan anda tentang cara menukar lokasi penerbitan video Kuaishou dan berkongsi beberapa petua untuk penerbitan video Kuaishou untuk membantu anda menggunakan platform ini dengan lebih baik untuk mempamerkan hasil kerja anda. 1. Di manakah Kuaishou diterbitkan dan bagaimana untuk menukar lokasinya? 1. Antara muka penerbitan: Dalam Kuaishou APP, klik butang "Terbitkan" untuk memasuki antara muka penerbitan video. 2. Maklumat lokasi: Dalam antara muka penerbitan, terdapat lajur "Lokasi" Klik untuk memasuki antara muka pemilihan lokasi. 3. Tukar lokasi: Dalam antara muka pemilihan lokasi, klik butang "Lokasi" untuk melihat lokasi semasa. Jika anda ingin menukar lokasi, klik "Lokasi"
