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

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

Filinvit

27.10.2018, 23:21

Здравствуйте, форумчане.
Верстаю сайт в 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>
Мне не надо его более нигде вызывать?

j0hnik

28.10.2018, 00:02

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

Filinvit

28.10.2018, 23:39

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

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

j0hnik

29.10.2018, 00:52

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 необязательно прописывать, это итак очевидно.

у вас структура немного не по селектору, я поправил

рони

29.10.2018, 07:59

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

j0hnik

29.10.2018, 16:40

точка перед main!!!
у него тег <main>

рони

29.10.2018, 17:02

j0hnik,
ок.

Filinvit

29.10.2018, 20:42

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

Filinvit

30.10.2018, 20:38

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

j0hnik

30.10.2018, 20:42

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

Filinvit

31.10.2018, 12:22

Еще раз спасибо. Несколько переделал и усложнил ваш вариант под свои нужды. Он работает. Я уже ощущаю, как скилл растет :D .