Размеры 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, работает все)))

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.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