У меня есть <div>
(назовем его «изображение»), который содержит несколько изображений <img><img><img>
и так далее. Ширина этого div устанавливается на 100% экрана, а изображения внутри изменяются в зависимости от ширины. Так что, в зависимости от ширины браузера, высота моего div меняется.
Теперь я хотел бы создать еще один div (назовем его «after_image»), который начинается после этого изображения, не используя «родственник», а получая высоту <div id="image">
и используя его как «top: px» атрибут.
Является ли это возможным? Может быть <script>
? (Я использую PHP)
2 ответа
Попробуй это :
<div id='image'>
<img src='' />
<img src='' />
<img src='' />
</div>
<div id='after_image'></div>
<script>
var h = document.getElementById('image').clientHeight // returns height as number
document.getElementById('after_image').style.top = h + 'px'
</script>
Вот как вы можете добиться того, чего хотите, хотя, на мой взгляд, это неправильный подход.
const
image = document.querySelector('#image'),
after = document.querySelector('#after_image')
after.style.top = image.getBoundingClientRect().bottom + 'px'
#image {
width: 200px;
height: 2750px;
box-sizing: border-box;
border: solid blue 3px;
background: skyblue;
}
#after_image {
width: 200px;
height: 500px;
position: absolute;
box-sizing: border-box;
border: solid orangered 3px;
background: pink;
}
<div id='image'>
<img src='' />
</div>
<div id='after_image'></div>
Если вы действительно хотите сделать это таким образом, лучше связать свой оператор JS с событием resize
.
window.addEventListener('resize', function(){
after.style.top = image.getBoundingClientRect().bottom + 'px'
}
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.