Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.06.2018, 09:05
Интересующийся
Отправить личное сообщение для ioprst_ Посмотреть профиль Найти все сообщения от ioprst_
 
Регистрация: 29.03.2018
Сообщений: 11

Размер блока div
Привет. Подскажите, пожалуйста, в чем может быть проблема. Есть HTML код:
<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
    <title>testPrj</title>
	<style>
		.wrapper {height: 100%; display: table; width: 100%;}
		.header {display: table-row; height: 1px;}
		.main {height: 100%; display: table; width: 100%;}
		.box {display: table-cell;}
		.sidebar {width: 200px;}
		.content {height: 100%;}
		.content iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
		.footer {display: table-row; height:1px;}
		/* Basic Style*/
		* { margin:0; padding:0;}
		html, body {height: 100%;}
	</style>
</head>
<body bgcolor="#ffff00">
	<div class="wrapper">
	  <div class="header">
		<h1>Header</h1>
        
        <button onclick='location.href="Auto.html"'>Auto</button>
        <button onclick='location.href="Auto1.html"'>Auto1</button>
        
	  </div>
	  <div class="main">
		<div class="box sidebar"></div>
		<div class="box content">
		  <iframe frameborder="0" marginwidth="0" marginheight="0" src="Auto.svg" id="AutoId"></iframe>
		</div>
		<div class="box sidebar"></div>
	  </div>
	  <div class="footer">Text. Text</div>
	</div>
	<script type="text/javascript" src="Auto.js"></script>
</body>
</html>

Мне необходимо получить размеры блоков div для классов main и box content.
Для main написал:
vpH = document.getElementsByClassName('main')[0].clientHeight;
vpW = document.getElementsByClassName('main')[0].clientWidth;

Все работает. Пытаюсь аналогичным образом получить размеры box content:
imgH = document.getElementsByClassName('box content')[0].clientHeight);
imgW = document.getElementsByClassName('box content')[0].clientWidth);

Ничего не выводит. Хотя видит object HTMLDivElement, если не использовать методы clientWidth/Height.
Ответить с цитированием
  #2 (permalink)  
Старый 20.06.2018, 09:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Сообщение от ioprst_
getElementsByClassName
поиск по классу, а не по классам
imgH = document.querySelectorAll('.box.content')[0].clientHeight
Ответить с цитированием
  #3 (permalink)  
Старый 20.06.2018, 09:14
Интересующийся
Отправить личное сообщение для ioprst_ Посмотреть профиль Найти все сообщения от ioprst_
 
Регистрация: 29.03.2018
Сообщений: 11

рони, спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 20.06.2018, 09:17
Интересующийся
Отправить личное сообщение для ioprst_ Посмотреть профиль Найти все сообщения от ioprst_
 
Регистрация: 29.03.2018
Сообщений: 11

рони, но почему-то работает только для clientHeight
Ответить с цитированием
  #5 (permalink)  
Старый 20.06.2018, 09:18
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,227

Сообщение от ioprst_
Пытаюсь аналогичным образом получить размеры box content:
imgH = document.getElementsByClassName('box content')[0].clientHeight);
imgW = document.getElementsByClassName('box content')[0].clientWidth);

Ничего не выводит
У тебя какие-то скобки не понятные...

Вот работающий вариант.
<div class="wrapper">
	  <div class="header">
		<h1>Header</h1>
        <button onclick='location.href="Auto.html"'>Auto</button>
        <button onclick='location.href="Auto1.html"'>Auto1</button>
	  </div>
	  <div class="main">
		<div class="box sidebar"></div>
		<div class="box content">
		  <iframe frameborder="0" marginwidth="0" marginheight="0" src="Auto.svg" id="AutoId"></iframe>
		</div>
		<div class="box sidebar"></div>
	  </div>
	  <div class="footer">Text. Text</div>
	</div>
<script type='text/javascript'>
var o=document.getElementsByClassName('box content')[0];
alert(o.clientHeight+' - '+o.clientWidth)
</script>
Ответить с цитированием
  #6 (permalink)  
Старый 20.06.2018, 09:20
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,227

Сообщение от рони
поиск по классу, а не по классам
В оригинале - поиск по строке, где классы разделены пробелом...
https://puzzleweb.ru/javascript/docu...yclassname.php
Ответить с цитированием
  #7 (permalink)  
Старый 20.06.2018, 09:21
Интересующийся
Отправить личное сообщение для ioprst_ Посмотреть профиль Найти все сообщения от ioprst_
 
Регистрация: 29.03.2018
Сообщений: 11

ksa, точно, не заметил, когда копипастил, а notepad не скажет) спасибо)
Ответить с цитированием
  #8 (permalink)  
Старый 20.06.2018, 09:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

ksa,
ок
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
стрелки вниз, верх при раздвижение блоков dima018 Элементы интерфейса 8 12.02.2018 21:29
Заменить значения value в форме при отправке на email the_little Общие вопросы Javascript 26 29.10.2017 21:26
Фиксированный размер div блока Andrei Элементы интерфейса 26 03.04.2014 09:42
Фиксация блока DIV при сворачивании другого блока DIV kacnepbI4 jQuery 2 04.04.2011 14:15
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21