Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.10.2018, 23:21
Новичок на форуме
Отправить личное сообщение для Filinvit Посмотреть профиль Найти все сообщения от Filinvit
 
Регистрация: 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.
Ответить с цитированием
  #2 (permalink)  
Старый 28.10.2018, 00:02
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

1) https://developer.mozilla.org/ru/doc...tComputedStyle
2) document.querySelector(".left-column-background .border").style.height =
3) разницы нет, внешний он или между тегами script
Ответить с цитированием
  #3 (permalink)  
Старый 28.10.2018, 23:39
Новичок на форуме
Отправить личное сообщение для Filinvit Посмотреть профиль Найти все сообщения от Filinvit
 
Регистрация: 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.
Ответить с цитированием
  #4 (permalink)  
Старый 29.10.2018, 00:52
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 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.
Ответить с цитированием
  #5 (permalink)  
Старый 29.10.2018, 07:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

j0hnik,
точка перед main!!!
Ответить с цитированием
  #6 (permalink)  
Старый 29.10.2018, 16:40
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от рони
точка перед main!!!
у него тег <main>
Ответить с цитированием
  #7 (permalink)  
Старый 29.10.2018, 17:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

j0hnik,
ок.
Ответить с цитированием
  #8 (permalink)  
Старый 29.10.2018, 20:42
Новичок на форуме
Отправить личное сообщение для Filinvit Посмотреть профиль Найти все сообщения от Filinvit
 
Регистрация: 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;
});
Ответить с цитированием
  #9 (permalink)  
Старый 30.10.2018, 20:38
Новичок на форуме
Отправить личное сообщение для Filinvit Посмотреть профиль Найти все сообщения от Filinvit
 
Регистрация: 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.
Ответить с цитированием
  #10 (permalink)  
Старый 30.10.2018, 20:42
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 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);
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вернуть div и все вложенные в него элементы в первоначальное состояние? lucky89 Общие вопросы Javascript 17 26.02.2015 18:41
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Пасоны, как правильно парсить параметры? megaupload Оффтопик 15 05.05.2013 14:44
Как передавать параметры из php скрипта в js imissyouso Общие вопросы Javascript 3 01.08.2012 18:24
Как передавать переданные в js файлы параметры? Mattias Общие вопросы Javascript 4 26.06.2008 16:58