Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan ketinggian div dalam tindak balas
Cara menetapkan ketinggian div dalam tindak balas: 1. Laksanakan ketinggian div melalui css 2. Isytiharkan objek C dalam keadaan dan simpan gaya butang tukar dalam objek, kemudian dapatkan A dan set semula C Hanya klik; "marginTop" di dalamnya.
Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.
Bagaimana untuk menetapkan ketinggian div sebagai tindak balas?
bertindak balas secara dinamik menetapkan ketinggian elemen
Gunakan tindak balas untuk melaksanakan mengubah suai gaya secara dinamik (kaedah ini tidak disyorkan melainkan tiada pilihan lain)
Seperti yang ditunjukkan di bawah:
Butang gantian dalam pelaksanaan rajah mengikut Di sudut kanan bawah imej, apabila ketinggian imej berubah, kedudukan butang tukar juga berubah.
1. Laksanakan melalui css (tiada penyelesaian buat masa ini)
2. Gunakan ciri paparan dipacu data tindak balas
2.1 Data: isytiharkan satu dalam keadaan Objek C, yang menyimpan gaya butang perubahan.
2.2 Operasi: Biarkan A = ketinggian gambar, B = tukar ketinggian butang. Selepas imej dimuatkan, dapatkan A dan tetapkan marginTop dalam C sekali lagi. (Idea ini hanya perlu menukar data dan tidak perlu mempertimbangkan lapisan paparan)
bina
this.state = { updateBtnStyle :{ fontSize: "12px",marginLeft:'20px',marginTop:'300px', } } //在class中定义的函数,如果需要使用到全局this,需要此操作 this.loading = this.loading.bind(this)
mengisytiharkan pemuatan fungsi operasi
loading(){ const imgHeight = document.getElementById('facePhoto').height console.log('图片的高度',document.getElementById('facePhoto')?.height) if(imgHeight === Number.parseInt(this.state.updateBtnStyle.marginTop)+24) return else{ this.setState({ updateBtnStyle:{ marginTop:document.getElementById('facePhoto')?.height-24+'px' } }) } }
Lihat pseudokod lapisan
<Item label="人脸照片" style={{ position: "relative" }} required> <img id={'facePhoto'} src={photo} alt="" width="300" onLoad={this.loading} style={{float:'left'}}/> <Button size="small" style={updateBtnStyle} onClick={() => StateManage.set(updatePhotoProps, { visible: true })}>更换</Button> </Item>
1. Dapatkan ketinggian imej:
1.1 Masa perolehan: Anda perlu menunggu untuk imej yang akan dimuatkan untuk mendapatkan ketinggiannya adalah berkesan, jadi anda perlu menggunakan acara onLoad img untuk memastikan bahawa imej telah dimuatkan apabila ketinggian imej diperolehi.
1.2 Cara mendapatkannya: Lebar dan tinggi imej ditetapkan melalui ketinggian dan lebar atribut, bukan melalui gaya, jadi kaedah untuk mendapatkan ketinggian = document.getElementById('xxx').height
2. Fungsi yang diisytiharkan tidak Mengikat ini menjadikannya mustahil untuk menggunakan setState
Pembelajaran yang disyorkan: "tutorial video bertindak balas"
Atas ialah kandungan terperinci Bagaimana untuk menetapkan ketinggian div dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!