Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
 
Рейтинг: Рейтинг темы: голосов - 9, средняя оценка - 4.67
sweelemk
0 / 0 / 0
Регистрация: 16.09.2013
Сообщений: 127
#1

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

15.08.2014, 16:17. Просмотров 1394. Ответов 31
Метки нет (Все метки)

Добрый день!
Ребята, как получить размеры картинки, подключаемой через 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 лежат нули. Как быть?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
15.08.2014, 16:17
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Размеры background через javascript (JavaScript):

Как узнать размеры background-size: contain ? - JavaScript
Доброй ночи! Есть блок с background-size: contain. Размеры блока известны, размеры оригинальной картинки тоже. После применения...

изменить background-image из javascript - JavaScript
как изменить background-image для div'a (ie8 browser). &lt;html&gt; &lt;head&gt; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/css.css&quot;...

Вставка элементов меню (содержащих javascript) через javascript - JavaScript
Пишу курсовой проект по JavaScript в ходе которого потребовалось создать небольшой локальный сайт, страничек довольно много и я решил, при...

Ссылка через background - JavaScript
Здравствуйте! Необходимо сделать так, что бы нажимая на картинку, тебя перебрасывало на другой сайт, причём картинка прописана в css как...

Как добавить онлайн оплату или банковские переводы в страницу через PHP или через JavaScript - JavaScript
Здравствуйте ребята))) подскажите пожалуйста, как добавить онлайн оплату или банковские переводы в страницу через PHP или через...

Изменить CSS свойство "background-img" через JS - JavaScript
Как изменить CSS свойство &quot;background-img&quot; через JS? Так делаю, но он ругается потому, что там знак &quot;-&quot;: var body =...

31
Thisman
363 / 334 / 81
Регистрация: 17.07.2013
Сообщений: 950
15.08.2014, 17:01 #2
sweelemk, на чистом js есть свойства offsetHeight/offsetWidth:

Javascript
1
2
var img = document.getElementByTagName("img")[0];
alert("width: " + img.offsetWidth + " /height: " + img.offsetHeight);
1
sweelemk
0 / 0 / 0
Регистрация: 16.09.2013
Сообщений: 127
15.08.2014, 17:15  [ТС] #3
Thisman, мне нужен размер картинки, подключаемой через css посредством background-image.
0
Thisman
363 / 334 / 81
Регистрация: 17.07.2013
Сообщений: 950
15.08.2014, 17:26 #4
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
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 минуту
Твой скрипт не работал, потому что ты пытался посчитать размеры картинки , которой на страничке не существовало, поэтому и размеров ее не было. Я взял твой алгоритм и чутка добавил, так если твой алгоритм был рабочий ( в плане создания картинки, особенно указания адреса к ней ) то проблем не должно быть
0
sweelemk
0 / 0 / 0
Регистрация: 16.09.2013
Сообщений: 127
17.08.2014, 23:37  [ТС] #5
это конечно гуд, но можно ли получить размер картинки:
CSS
1
background-image: url('imagesize.png');
меня интересует именно, к примеру, записать ширину картинки imagesize.png в переменную widthImage? можно ли так?
0
Thisman
363 / 334 / 81
Регистрация: 17.07.2013
Сообщений: 950
18.08.2014, 00:12 #6
sweelemk, я же написал тебе скрипт. Он не работает? Суть такая, мы создаем твою картинку, прячем ее ( что бы не было видно ) , но она есть на страничке, а значит у нее есть и размер
1
qm
25 / 24 / 6
Регистрация: 15.08.2014
Сообщений: 60
18.08.2014, 02:34 #7
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);
  };
});
0
kalabuni
Супермизантроп
3019 / 2375 / 422
Регистрация: 18.04.2012
Сообщений: 6,936
18.08.2014, 03:04 #8
qm, вообще-то по уму нужно сначала определить функцию по onload и только потом прописывать её SRC
0
qm
25 / 24 / 6
Регистрация: 15.08.2014
Сообщений: 60
18.08.2014, 05:16 #9
kalabuni,
Да, вы правы.
0
sweelemk
0 / 0 / 0
Регистрация: 16.09.2013
Сообщений: 127
18.08.2014, 10:08  [ТС] #10
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
0
Thisman
363 / 334 / 81
Регистрация: 17.07.2013
Сообщений: 950
18.08.2014, 11:16 #11
sweelemk, 7 строку замени на :

Javascript
1
$(document.body).append(img) // добавляем картинку на страничку
0
sweelemk
0 / 0 / 0
Регистрация: 16.09.2013
Сообщений: 127
18.08.2014, 11:21  [ТС] #12
Thisman, все равно ширина и высота равно 0
0
Thisman
363 / 334 / 81
Регистрация: 17.07.2013
Сообщений: 950
18.08.2014, 11:33 #13
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
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) // добавляем картинку на страничку
1
sweelemk
0 / 0 / 0
Регистрация: 16.09.2013
Сообщений: 127
18.08.2014, 11:52  [ТС] #14
Thisman, так заработало! Спасибо!!!!!

Добавлено через 12 минут
Thisman, что-то у меня не получается достать эти значения из функции((((( мне их нужно использовать в другой функции.
0
Thisman
363 / 334 / 81
Регистрация: 17.07.2013
Сообщений: 950
18.08.2014, 11:59 #15
sweelemk, присвой в функции каким-нибудь глобальным переменным эти значения и все
0
18.08.2014, 11:59
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
18.08.2014, 11:59
Привет! Вот еще темы с ответами:

Скроллинг через JavaScript - JavaScript
Здравствуйте. Подскажите как можно решить следующую проблему. Есть одностраничный сайт с вертикальной прокруткой. При переходе по...

Excel через JavaScript - JavaScript
Нужно создать excel на своей web-странице,чтобы выполнялись такие же действия со столбцами!

Доступ к устройствам через JavaScript - JavaScript
Здравствуйте. Для общего развития интересуюсь к каким устройствам можно получить доступ с WEB страницы ? Микрофон и камера - очевидно....

Вставка гиперссылки через JavaScript - JavaScript
Здравствуйте. Помогите мне разобраться с парочкой нюансов на JS, а именно: Имеется таблица. с некоторой пустой ячейкой. Под ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Рейтинг@Mail.ru