27.10.2018, 23:21
|
|
Новичок на форуме
|
|
Регистрация: 27.10.2018
Сообщений: 8
|
|
|
Как передавать параметры между div-ами, выбирая их по селекторам классов?
Здравствуйте, форумчане.
Верстаю сайт в html/css и у меня возникла задача - с помощью внешнего скрипта JavaScript брать высоту height из одного слоя (т.е. div) и присваивать ее рядом находящемуся слою. Причем поиск нужного дива хочу сделать по селекторам классов.
1) Как я понимаю, таким образом в переменную var MainContentBorderHeight передаются параметры нужного div, в т.ч. и высота?
function left-column_height () {
/*возвращается элемент div с class="border", находящийся в div с class="main-content", находящемся в div с class="main"*/
var MainContentBorderHeight = document.querySelector("div.main div.main-content div.border");
};
2) Далее мне надо присвоить эту высоту слою с class="border", выбрав его по селекторам классов:
|
Код:
|
<!--другой код-->
<main>
<!--другой код-->
<div class = "left-column-background">
<div class = "border">
</div>
</div>
<!--другой код-->
<main>
<!--другой код--> |
Подскажите пожалуйста, как это сделать? Во всех инструкциях, что я нашел, приводится или поиск элемента по id, или работа с body или неким абстрактным div, но без вложенных селекторов.
3) Почему-то во всех примерах и гайдах по работе с DOM пишут <script>...</script> в самом html-файле. Мне же нужен внешний js-скрипт.
В html-файле я подключаю скрипт с помощью строки:
|
Код:
|
<script type="text/javascript" src="JS_scripts/LeftColumnBorderHeight.js"></script> |
Мне не надо его более нигде вызывать?
Последний раз редактировалось Filinvit, 27.10.2018 в 23:24.
|
|
28.10.2018, 23:39
|
|
Новичок на форуме
|
|
Регистрация: 27.10.2018
Сообщений: 8
|
|
Спасибо. Пробую разобраться далее.
В html-файле написал код, как внутренний скрипт ( т.е. в <head></head>):
<script>
/*в переменную MainContentBorder возвращается элемент div с class="border", находящийся в div с class="main-content",
который находится в div с class="main", который находится в body (т.е. возвращается слой, в котором отображается граница главного контента.) */
var MainContentBorder = document.querySelector("div.main div.main-content div.border");
/*передаем переменной MainContentBorderHeight высоту слоя, в котором отображается граница главного контента*/
var MainContentBorderHeight = window.getComputedStyle(MainContentBorder, null).getPropertyValue("height");
/*передаем слою, в котором отображается граница левой колонки, высоту в виде переменной MainContentBorderHeight*/
document.querySelector("div.main .left-column-background .border").style.height = MainContentBorderHeight;
</script>
Но пока что не пашет. Есть ли в коде скрипта явная синтаксическая ошибка?
А также:
не нужно же его писать внутри изменяемого или копируемого слоя, т.е. в <div>...</div>?
и не надо в пути к нужному элементу указывать body, т.е., например, писать var MainContentBorder = document.querySelector(" body div.main div.main-content div.border");?
Последний раз редактировалось Filinvit, 28.10.2018 в 23:44.
|
|
29.10.2018, 00:52
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
document.addEventListener("DOMContentLoaded", function(){
/*в переменную MainContentBorder возвращается элемент div с class="border", находящийся в div с class="main-content",
который находится в div с class="main", который находится в body (т.е. возвращается слой, в котором отображается граница главного контента.) */
var MainContentBorder = document.querySelector("main div.main-content div.border");
/*передаем переменной MainContentBorderHeight высоту слоя, в котором отображается граница главного контента*/
var MainContentBorderHeight = window.getComputedStyle(MainContentBorder, null).getPropertyValue("height");
/*передаем слою, в котором отображается граница левой колонки, высоту в виде переменной MainContentBorderHeight*/
document.querySelector("main .left-column-background .border").style.height = MainContentBorderHeight;
});
если подключен в head оборачивают в DOMContentLoaded
body необязательно прописывать, это итак очевидно.
у вас структура немного не по селектору, я поправил
Последний раз редактировалось j0hnik, 29.10.2018 в 00:59.
|
|
29.10.2018, 07:59
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,147
|
|
|
j0hnik,
точка перед main!!!
|
|
29.10.2018, 16:40
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Сообщение от рони
|
|
точка перед main!!!
|
у него тег <main> |
|
29.10.2018, 17:02
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,147
|
|
|
j0hnik,
ок.
|
|
29.10.2018, 20:42
|
|
Новичок на форуме
|
|
Регистрация: 27.10.2018
Сообщений: 8
|
|
На самом деле я тупанул и в своем html-коде написал <main></main>, а реально там стоит <div class="main"></div>. Но спасибо, j0hnik, что обратили мое внимание.
Я взял ваш вариант скрипта, подправил этот момент с main, и заработало 
В результате скрипт, задаваемый внутри <head></head> и обернутый в <script></script> выглядит так:
document.addEventListener("DOMContentLoaded", function(){ /*если скрипт подключен в head, оборачивают в DOMContentLoaded*/
/*в переменную MainContentBorder возвращается элемент div с class="border", находящийся в div с class="main-content",
который находится в div с class="main", который находится в body (т.е. возвращается слой, в котором отображается граница главного контента.) */
var MainContentBorder = document.querySelector("div.main .main-content .border");
/*передаем переменной MainContentBorderHeight высоту слоя, в котором отображается граница главного контента*/
var MainContentBorderHeight = window.getComputedStyle(MainContentBorder, null).getPropertyValue("height");
/*передаем слою, в котором отображается граница левой колонки, высоту в виде переменной MainContentBorderHeight*/
document.querySelector("div.main .left-column-background .border").style.height = MainContentBorderHeight;
});
|
|
30.10.2018, 20:38
|
|
Новичок на форуме
|
|
Регистрация: 27.10.2018
Сообщений: 8
|
|
Продолжаю совершенствовать свой скрипт.
Теперь сделал его внешним и добавил перенос значения padding-bottom.
Все работает, но столкнулся с проблемой - при каждой параметризации окна браузера слои расползаются и надо перезагружать веб-страницу, что бы они выровнялись.
Подскажите пожалуйста, как сделать автозапуск выравнивания при изменении размеров окна браузера?
document.addEventListener("DOMContentLoaded", function(){ //если скрипт подключен в head, оборачивают в DOMContentLoaded
//в переменную MainContentBorder возвращается элемент div с class="border", находящийся в div с class="main-content",
//который находится в div с class="main", который находится в body (т.е. возвращается слой, в котором отображается граница главного контента.)
var MainContentBorder = document.querySelector("div.main .main-content .border");
//передаем переменным MainContentBorderHeight и MainContentBorderPadding высоту и внутренний нижний отступ слоя, отображающего границу главного контента
var MainContentBorderHeight = window.getComputedStyle(MainContentBorder, null).getPropertyValue("height");
var MainContentBorderPadding = window.getComputedStyle(MainContentBorder, null).getPropertyValue("padding-bottom");
//передаем слою, отображающему границу левой колонки, высоту в виде переменной MainContentBorderHeight и внутренний нижний отступ в виде переменной MainContentBorderPadding
document.querySelector("div.main .left-column-background .border").style.height = MainContentBorderHeight;
document.querySelector("div.main .left-column-background .border").style.padding = MainContentBorderPadding;
alert("MainContentBorderHeight = " + MainContentBorderHeight + "\n MainContentBorderPadding = " + MainContentBorderPadding); /*вывод инфы для отладки*/
});
Последний раз редактировалось Filinvit, 30.10.2018 в 20:46.
|
|
30.10.2018, 20:42
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
function height(){
var MainContentBorder = document.querySelector("div.main .main-content .border");
var MainContentBorderHeight = window.getComputedStyle(MainContentBorder, null).getPropertyValue("height");
document.querySelector("div.main .left-column-background .border").style.height = MainContentBorderHeight;
}
document.addEventListener("DOMContentLoaded", height);
window.addEventListener("resize", height);
|
|
|
|
