Размеры background через javascript

@sweelemk · Регистрация: 16.09.2013

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

Добрый день!
Ребята, как получить размеры картинки, подключаемой через css?

HTML5
1
2
3
    <div class="main">
        <div id="anim"></div>
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body{
    margin: 0;
    padding: 0;
}
.main{
    position: relative;
    background: #A3E496;
    height: 300px;
    width: 500px;
    margin: 0 auto;
    margin-top: 150px;
}
#anim{
    display: block;
    width: 162.5px;
    height: 216px;
    position: relative;
    top: 65px;
    background-image: url("anim_01.png");
    background-color: #CC6699;
    margin: 0 auto;
    
}

JavaScript
1
2
3
4
5
6
7
8
9
$(function(){
    var widthDIV = $("#anim").width();
    var heightDIV = $("#anim").height();
    var img = new Image;
    img.src = $('#anim').css('background-image').replace(/url\((['"])?(.*?)\1\)/gi, '');
    var bgImgHeight = img.height;
    var bgImgWidth = img.width;
alert(bgImgHeight + ' ' + bgImgWidth);
});

Размеры блока получилась записать в переменные, а вот размер картинки - не выходит.
Код на получение размеров картинки подсмотрел в интернете...

Результат: ошибок нет, но вот в переменных bgImgHeight и bgImgWidth лежат нули. Как быть?

@Thisman · 15.08.2014, 17:01

sweelemk, на чистом js есть свойства offsetHeight/offsetWidth:

JavaScript
1
2
var img = document.getElementByTagName("img")[0];
alert("width: " + img.offsetWidth + " /height: " + img.offsetHeight);

@sweelemk · 15.08.2014, 17:15 **[ТС]**

Thisman, мне нужен размер картинки, подключаемой через css посредством background-image.

@Thisman · 15.08.2014, 17:26

sweelemk, окей, секунду

Добавлено через 5 минут

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){
    var widthDIV = $("#anim").width();
    var heightDIV = $("#anim").height();
    var img = new Image();
    img.src = $('#anim').css('background-image').replace(/url\((['"])?(.*?)\1\)/gi, '');
 
    $(body).append(img) // добавляем картинку на страничку
    $(img).css("opacity","0") // скрываем не через display, потому что можем снова потерять размеры
    $(img).css("position","fixed") // что бы ничего не сдвигала
    $(img).css("z-index",-999) // что бы не мешалась
 
    // пытаемся вывести 
    alert("width: " + img.offsetWidth + " /height: " + img.offsetHeight);
    // как вариант после можно удалить картинку
});

Добавлено через 1 минуту
Твой скрипт не работал, потому что ты пытался посчитать размеры картинки , которой на страничке не существовало, поэтому и размеров ее не было. Я взял твой алгоритм и чутка добавил, так если твой алгоритм был рабочий ( в плане создания картинки, особенно указания адреса к ней ) то проблем не должно быть

@sweelemk · 17.08.2014, 23:37 **[ТС]**

это конечно гуд, но можно ли получить размер картинки:

CSS
1
background-image: url('imagesize.png');

меня интересует именно, к примеру, записать ширину картинки imagesize.png в переменную widthImage? можно ли так?

@Thisman · 18.08.2014, 00:12

sweelemk, я же написал тебе скрипт. Он не работает? Суть такая, мы создаем твою картинку, прячем ее ( что бы не было видно ) , но она есть на страничке, а значит у нее есть и размер

@qm · 18.08.2014, 02:34

Thisman,
А смысл добавлять картинку в DOM? Есть же свойства .width, .height.

sweelemk,
В переменных лежат нули потому-что картинка в этот момент еще не подгрузилась.
Кроме того, регулярка ваша возвращает некорректный url.

Вот так должно работать:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(function(){
  var widthDIV = $("#anim").width();
  var heightDIV = $("#anim").height();
  var img = new Image;
  img.src = $('#anim').css('background-image').slice(4, -1);
  img.onload = function () {
    var bgImgHeight = img.height;
    var bgImgWidth = img.width;
    alert(bgImgHeight + ' ' + bgImgWidth);
  };
});

@kalabuni · 18.08.2014, 03:04

qm, вообще-то по уму нужно сначала определить функцию по onload и только потом прописывать её SRC

@qm · 18.08.2014, 05:16

kalabuni,
Да, вы правы.

@sweelemk · 18.08.2014, 10:08 **[ТС]**

qm, код выдает ошибку о том, что картинка не найдена. Если сделать вот так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(function(){
    var widthDIV = $("#anim").width();
  var heightDIV = $("#anim").height();
  var img = new Image;
  img.onload = function () {
    img.src = $('#anim').css('background-image').slice(4, -1);
    var bgImgHeight = img.height;
    var bgImgWidth = img.width;
    alert(bgImgHeight + ' ' + bgImgWidth);
  };
});

тогда в принципе не работает... ошибок нет, но alert не срабатывает...

Добавлено через 1 минуту
GET file:///D:/All%20for%20HTML/Plugins%20(my)/anim/'file:///D:/All%20for%20HTML/Plugins%20(my)/anim/anim_01.png' net::ERR_FILE_NOT_FOUND

Добавлено через 2 минуты
qm, Ваш код почему-то берет путь 2 раза подряд

Добавлено через 1 минуту
Thisman, Ваш код выдает ошибку : Uncaught ReferenceError: body is not defined

@Thisman · 18.08.2014, 11:16

sweelemk, 7 строку замени на :

JavaScript
1
$(document.body).append(img) // добавляем картинку на страничку

@sweelemk · 18.08.2014, 11:21 **[ТС]**

Thisman, все равно ширина и высота равно 0

@Thisman · 18.08.2014, 11:33

sweelemk, соединив все ответы выше:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
    
var img = new Image();
img.src = "test.jpg";
img.onload = function () { 
      alert("width: " + img.offsetWidth + " /height: " + img.offsetHeight);
}
with(img.style) {
      position = "fixed";
      opacity = 0;
      zIndex = -9999;
}
document.body.appendChild(img) // добавляем картинку на страничку

@sweelemk · 18.08.2014, 11:52 **[ТС]**

Thisman, так заработало! Спасибо!!!!!

Добавлено через 12 минут
Thisman, что-то у меня не получается достать эти значения из функции((((( мне их нужно использовать в другой функции.

@Thisman · 18.08.2014, 11:59

sweelemk, присвой в функции каким-нибудь глобальным переменным эти значения и все

@sweelemk · 18.08.2014, 12:07 **[ТС]**

Thisman,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function(){
    var widthDIV = $("#anim").width();
    var heightDIV = $("#anim").height();
    var widthImg;
    var heightImg;
    var img = new Image();
img.src = "anim_01.png";
img.onload = function () { 
      
      widthImg = img.offsetWidth;
      heightImg = img.offsetHeight;
      //alert("width: " + widthImg + " /height: " + heightImg);
}
 
with(img.style) {
      position = "fixed";
      opacity = 0;
      zIndex = -9999;
}
alert("width: " + widthImg + " /height: " + heightImg);
document.body.appendChild(img) 
 
});

может что-то не так делаю? значение не определено для переменных

@Thisman · 18.08.2014, 12:16

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var widthImg;
var heightImg;
$(function(){
    var widthDIV = $("#anim").width();
    var heightDIV = $("#anim").height();
    
    var img = new Image();
    img.src = "anim_01.png";
    img.onload = function () {      
        widthImg = img.offsetWidth;
        heightImg = img.offsetHeight;
        alert("width: " + widthImg + " /height: " + heightImg);
    }
 
    with(img.style) {
        position = "fixed";
        opacity = 0;
        zIndex = -9999;
    }
    alert("width: " + widthImg + " /height: " + heightImg);
    document.body.appendChild(img) 
 
});

@sweelemk · 18.08.2014, 12:24 **[ТС]**

ни разу не работает

@Eva Rosalene · 18.08.2014, 12:42

Thisman, ну асинхрон же.

Вы не можете вытащить значения, потому что на момент вытаскивания их ещё нет. Используйте callback в onload вместо возврата значения.

Добавлено через 3 минуты

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function(){
    var widthDIV = $("#anim").width();
    var heightDIV = $("#anim").height();
    
    var img = new Image();
    img.src = "anim_01.png";
    img.onload = function () {      
        widthImg = img.offsetWidth;
        heightImg = img.offsetHeight;
        callbackFn(widthImg, heightImg);
    }
 
    with(img.style) {
        position = "fixed";
        opacity = 0;
        zIndex = -9999;
    }
 
    document.body.appendChild(img); 
 
    function callbackFn(w, h){
       alert(w + "x" + h);
    };
});

Добавлено через 1 минуту
UPD: Поправил код

@sweelemk · 18.08.2014, 12:43 **[ТС]**

FraidZZ, работает все)))

Новые блоги и статьи Все статьи Все блоги /
Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	Программный отбор значений справочника Maks 21.03.2026 Установка программного отбора значений справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .

Размеры background через javascript

Решение

Решение

@sweelemk 0 / 0 / 1 Регистрация: 16.09.2013 Сообщений: 127
	15.08.2014, 17:15 [ТС]
	Thisman, мне нужен размер картинки, подключаемой через css посредством background-image. 0

@Thisman Модератор 771 / 352 / 142 Регистрация: 17.07.2013 Сообщений: 992
	18.08.2014, 00:12
	sweelemk, я же написал тебе скрипт. Он не работает? Суть такая, мы создаем твою картинку, прячем ее ( что бы не было видно ) , но она есть на страничке, а значит у нее есть и размер 1

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	18.08.2014, 03:04
	qm, вообще-то по уму нужно сначала определить функцию по onload и только потом прописывать её SRC 0

@qm 25 / 24 / 7 Регистрация: 15.08.2014 Сообщений: 60
	18.08.2014, 05:16
	kalabuni, Да, вы правы. 0

@sweelemk 0 / 0 / 1 Регистрация: 16.09.2013 Сообщений: 127
	18.08.2014, 11:21 [ТС]
	Thisman, все равно ширина и высота равно 0 0

@sweelemk 0 / 0 / 1 Регистрация: 16.09.2013 Сообщений: 127
	18.08.2014, 11:52 [ТС]
	Thisman, так заработало! Спасибо!!!!! Добавлено через 12 минут Thisman, что-то у меня не получается достать эти значения из функции((((( мне их нужно использовать в другой функции. 0

@Thisman Модератор 771 / 352 / 142 Регистрация: 17.07.2013 Сообщений: 992
	18.08.2014, 11:59
	sweelemk, присвой в функции каким-нибудь глобальным переменным эти значения и все 0

@sweelemk 0 / 0 / 1 Регистрация: 16.09.2013 Сообщений: 127
	18.08.2014, 12:24 [ТС]
	ни разу не работает 0

@sweelemk 0 / 0 / 1 Регистрация: 16.09.2013 Сообщений: 127
	18.08.2014, 12:43 [ТС]
	FraidZZ, работает все))) 0