Javascript-форум - Как передавать параметры между div-ами, выбирая их по селекторам классов?

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Как передавать параметры между div-ами, выбирая их по селекторам классов? (https://javascript.ru/forum/events/75665-kak-peredavat-parametry-mezhdu-div-ami-vybiraya-ikh-po-selektoram-klassov.html)

Как передавать параметры между 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>

Мне не надо его более нигде вызывать?

1) https://developer.mozilla.org/ru/doc...tComputedStyle
2) document.querySelector(".left-column-background .border").style.height =
3) разницы нет, внешний он или между тегами script

Спасибо. Пробую разобраться далее.

В 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");?

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,
точка перед main!!!

Цитата:

Сообщение от рони

точка перед main!!!

у него тег <main>

На самом деле я тупанул и в своем 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;
});

Продолжаю совершенствовать свой скрипт.
Теперь сделал его внешним и добавил перенос значения 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); /*вывод инфы для отладки*/
});

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);