Kod js tulen membolehkan elemen dengan lebar dan ketinggian yang tidak diketahui dipaparkan secara menegak, mendatar dan berpusat dalam kemahiran element_javascript yang ditentukan-tutorial js-php.cn

Kod js tulen membolehkan elemen dengan lebar dan ketinggian yang tidak diketahui dipaparkan secara menegak, mendatar dan berpusat dalam kemahiran element_javascript yang ditentukan

WBOY

Lepaskan： 2016-05-16 15:39:43

asal

1340 orang telah melayarinya

Yang berikut menggunakan elemen span sebagai contoh untuk memperkenalkan cara merealisasikan kesan pemusatan mendatar dan menegak bagi elemen span dalam div Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>脚本之家</title>
<style type="text/css">
#box{
 width:200px;
 height:150px;
 background:blue;
 position:relative;
}
#antzone{
 background:green;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var obox=document.getElementById("box");
 var oantzone=document.getElementById("antzone");
 var w=oantzone.offsetWidth;
 var h=oantzone.offsetHeight;
 oantzone.style.position="absolute";
 oantzone.style.left="50%";
 oantzone.style.top="50%";
 
 oantzone.style.marginLeft=-(w/2)+"px";
 oantzone.style.marginTop=-(h/2)+"px";
}
</script>
</head>
<body>
<div id="box">
 <spanj id="antzone">脚本之家</span>
</div>
</body>
</html>

Salin selepas log masuk

Kod anda di atas mencapai kesan memusatkan elemen span secara menegak dan mendatar dalam div Berikut ialah pengenalan ringkas kepada proses pelaksanaannya.

1. Prinsip pelaksanaan:

Walaupun CSS tidak memberikan saiz elemen span secara eksplisit, ia mempunyai saiz selepas semua saiz ini boleh diperoleh menggunakan atribut offsetWidth dan offsetHeight, dan kemudian tetapkan elemen span kepada kedudukan mutlak, dan kemudian tetapkan. nilai atribut kiri dan atas masing-masing kepada 50%, tetapi kali ini bukan titik tengah elemen span yang dipusatkan secara menegak dan mendatar, tetapi sudut kiri atas elemen span yang dipusatkan secara menegak dan mendatar margin negatif elemen rentang ditetapkan, dan saiznya ialah separuh lebar dan tinggi elemen rentang , dengan itu mencapai kesan pemusatan menegak dan mendatar.

Di atas adalah keseluruhan kandungan artikel ini untuk hari ini saya akan mengemas kini anda dengan butiran tentang penggunaan atribut seperti scrollTop, offsetHeight dan offsetTop pada masa hadapan awak.