Кросбраузерная ошибка, ширина картинки

@Mois-ilya · Регистрация: 19.01.2015

Студворк — интернет-сервис помощи студентам

В общем ситуация такая, что, нужно поставить блоку ширину вложенных в него картинок.
В общем примерно такой код, думаю по нему будет понятно.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
 
    img {
      float: left;
      height: 15em;
    }
  </style>
</head>
<body>
  <div id="gallery">
      <img id="1" src="http://s32.postimg.org/fywxvux39/image.jpg" alt="…">
      <img id="2" src="http://s32.postimg.org/xq8kabchx/18310.jpg" alt="…">
      <img id="3" src="http://s32.postimg.org/5at6x0n45/1278418609_van_gogh03.jpg" alt="…">
      <img id="4" src="http://s32.postimg.org/fywxvux39/image.jpg" alt="…">
      <img id="5" src="http://s32.postimg.org/n5u1dzimd/tn_Van_Gog_0051.jpg" alt="…">
  <img id="6" src="http://s32.postimg.org/fywxvux39/image.jpg" alt="…">
  </div>
 
  <script>
    var h = 0;
    var p;
    for (var i = 1; i < 7; i++) {
      p = document.getElementById(i).clientWidth;
      h += p; 
    }
    document.getElementById("gallery").style.cssText="width: " + (h+1) + "px";
  </script>
</body>
</html>

Но тут у меня возникла проблема, в Firefox все работает как часы, а вот Chrome наотрез отказывается считать 'h'
Я уже руками каждую строчку забил в консоль, но как только все оборачивается в for, хром посылает.
Даже IE9 все понимает

Буду очень благодарен за помощь

@Stas_Garcia · 08.05.2016, 19:21

У меня везде показывает в столбик. А зачем вам здесь js? Средствами css все это делается.

@kalabuni · 08.05.2016, 19:39

Честное слово, мне уже надоело постить здесь эту ссылку -- прочтите первое предложение и запомните его навсегда!

идентификаторы и имена должны начинаться с латинской буквы любого регистра, а арабские цифры и прочие разрешённые символы тоже могут в идентификаторах и именах присутствовать, но только не первым символом (и, тем более, не единственным)

кроме того, почему вы используете clientWidth?
здесь необходимо суммировать именно offsetWidth

@Mois-ilya · 08.05.2016, 19:44 **[ТС]**

Приношу искренние извинения (никогда так не делаю, просто пока создавал пример точно описывающий мою проблему, как то это упустил)

Но проблема в любом случае не в этом.

А средствами CSS (лично я не знаю как), нельзя посчитать ширину всех картинок после того как ты их ограничил по высоте.

Вот код без неправильностей

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
 
    img {
      float: left;
      height: 15em;
      width: auto;
    }
  </style>
</head>
<body>
  <div id="gallery">
      <img id="i1" src="http://s32.postimg.org/fywxvux39/image.jpg" alt="…">
      <img id="i2" src="http://s32.postimg.org/xq8kabchx/18310.jpg" alt="…">
      <img id="i3" src="http://s32.postimg.org/5at6x0n45/1278418609_van_gogh03.jpg" alt="…">
      <img id="i4" src="http://s32.postimg.org/fywxvux39/image.jpg" alt="…">
      <img id="i5" src="http://s32.postimg.org/n5u1dzimd/tn_Van_Gog_0051.jpg" alt="…">
      <img id="i6" src="http://s32.postimg.org/fywxvux39/image.jpg" alt="…">
  </div>
 
  <script>
    var h = 0;
    var p;
    for (var i = 1; i < 7; i++) {
      p = document.getElementById('i' + i).clientWidth;
      h += p; 
    }
    document.getElementById("gallery").style.cssText="width: " + (h+1) + "px";
  </script>
</body>
</html>

Добавлено через 3 минуты
В данном случае (про offsetWidth) это не так важно, потому что сами картинки не имеют ни отступов ни border,
и я попробывал, ничего не поменялось(

@Stas_Garcia · 08.05.2016, 19:48

Вы пытаетесь узнать их размер до того, как картинки прорендерелись => высота и ширина = 0. Используйте таймаут, либо проверяйте картинки на .ready() / .load().
Также почитайте про дебаг через консоль ( console.log() ) - будет намного легче выискивать неисправности.

@Mois-ilya · 08.05.2016, 19:58 **[ТС]**

Спасибо, точно так оно и есть (Все эта оптимизация и скорость Chrome, ненавижу его, хотя он хорош)

@Stas_Garcia · 08.05.2016, 20:03

Сообщение от Mois-ilya

Все эта оптимизация и скорость Chrome

Не совсем. Во-первых влияет то, что картинки вы подгружаете с другого источника. Во-вторых потому-что ваш скрипт выполняется сразу же после инициализации страницы (картинки не загружены к тому моменту, как начинает работать скрипт). Chrome здесь не виновен.

@Mois-ilya · 08.05.2016, 20:07 **[ТС]**

Да я уже обернул скрипт в функцию и запускаю его после подгрузки всей страницы, просто не уж больно непонятно было, почему именно хром (у меня на компьютере, с моим интернетом, не хотел работать), все остальные чутка тормозили и запускали скрипт после прогрузки всей страницы

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@Stas_Garcia Ушел наливать чай 188 / 138 / 32 Регистрация: 02.03.2013 Сообщений: 650
	08.05.2016, 19:21
	У меня везде показывает в столбик. А зачем вам здесь js? Средствами css все это делается. 0

@Stas_Garcia Ушел наливать чай 188 / 138 / 32 Регистрация: 02.03.2013 Сообщений: 650
	08.05.2016, 19:48
	Сообщение было отмечено Mois-ilya как решение Решение Вы пытаетесь узнать их размер до того, как картинки прорендерелись => высота и ширина = 0. Используйте таймаут, либо проверяйте картинки на .ready() / .load(). Также почитайте про дебаг через консоль ( console.log() ) - будет намного легче выискивать неисправности. 0

@Mois-ilya 0 / 0 / 1 Регистрация: 19.01.2015 Сообщений: 72
	08.05.2016, 19:58 [ТС]
	Спасибо, точно так оно и есть (Все эта оптимизация и скорость Chrome, ненавижу его, хотя он хорош) 0

@Mois-ilya 0 / 0 / 1 Регистрация: 19.01.2015 Сообщений: 72
	08.05.2016, 20:07 [ТС]
	Да я уже обернул скрипт в функцию и запускаю его после подгрузки всей страницы, просто не уж больно непонятно было, почему именно хром (у меня на компьютере, с моим интернетом, не хотел работать), все остальные чутка тормозили и запускали скрипт после прогрузки всей страницы 0

Кросбраузерная ошибка, ширина картинки

Решение