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

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

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

Добрый день!
Ребята, как получить размеры картинки, подключаемой через css?
http://www.cyberforum.ru/javascript/thread1913059.html
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-image из javascript
как изменить background-image для div'a (ie8 browser). &lt;html&gt; &lt;head&gt;...

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

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

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

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

31
Thisman
Модератор
757 / 339 / 134
Регистрация: 17.07.2013
Сообщений: 961
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 / 1
Регистрация: 16.09.2013
Сообщений: 127
15.08.2014, 17:15  [ТС] #3
Thisman, мне нужен размер картинки, подключаемой через css посредством background-image.
0
Thisman
Модератор
757 / 339 / 134
Регистрация: 17.07.2013
Сообщений: 961
15.08.2014, 17:26 #4
Лучший ответ Сообщение было отмечено Eva Rosalene как решение

Решение

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 / 1
Регистрация: 16.09.2013
Сообщений: 127
17.08.2014, 23:37  [ТС] #5
это конечно гуд, но можно ли получить размер картинки:
CSS
1
background-image: url('imagesize.png');
меня интересует именно, к примеру, записать ширину картинки imagesize.png в переменную widthImage? можно ли так?
0
Thisman
Модератор
757 / 339 / 134
Регистрация: 17.07.2013
Сообщений: 961
18.08.2014, 00:12 #6
sweelemk, я же написал тебе скрипт. Он не работает? Суть такая, мы создаем твою картинку, прячем ее ( что бы не было видно ) , но она есть на страничке, а значит у нее есть и размер
1
qm
25 / 24 / 7
Регистрация: 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
Нарушитель
3166 / 2515 / 602
Регистрация: 18.04.2012
Сообщений: 7,614
18.08.2014, 03:04 #8
qm, вообще-то по уму нужно сначала определить функцию по onload и только потом прописывать её SRC
0
qm
25 / 24 / 7
Регистрация: 15.08.2014
Сообщений: 60
18.08.2014, 05:16 #9
kalabuni,
Да, вы правы.
0
sweelemk
0 / 0 / 1
Регистрация: 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
Модератор
757 / 339 / 134
Регистрация: 17.07.2013
Сообщений: 961
18.08.2014, 11:16 #11
sweelemk, 7 строку замени на :

Javascript
1
$(document.body).append(img) // добавляем картинку на страничку
0
sweelemk
0 / 0 / 1
Регистрация: 16.09.2013
Сообщений: 127
18.08.2014, 11:21  [ТС] #12
Thisman, все равно ширина и высота равно 0
0
Thisman
Модератор
757 / 339 / 134
Регистрация: 17.07.2013
Сообщений: 961
18.08.2014, 11:33 #13
Лучший ответ Сообщение было отмечено Eva Rosalene как решение

Решение

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 / 1
Регистрация: 16.09.2013
Сообщений: 127
18.08.2014, 11:52  [ТС] #14
Thisman, так заработало! Спасибо!!!!!

Добавлено через 12 минут
Thisman, что-то у меня не получается достать эти значения из функции((((( мне их нужно использовать в другой функции.
0
Thisman
Модератор
757 / 339 / 134
Регистрация: 17.07.2013
Сообщений: 961
18.08.2014, 11:59 #15
sweelemk, присвой в функции каким-нибудь глобальным переменным эти значения и все
0
sweelemk
0 / 0 / 1
Регистрация: 16.09.2013
Сообщений: 127
18.08.2014, 12:07  [ТС] #16
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) 
 
});
может что-то не так делаю? значение не определено для переменных
0
Thisman
Модератор
757 / 339 / 134
Регистрация: 17.07.2013
Сообщений: 961
18.08.2014, 12:16 #17
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) 
 
});
0
sweelemk
0 / 0 / 1
Регистрация: 16.09.2013
Сообщений: 127
18.08.2014, 12:24  [ТС] #18
ни разу не работает
0
Eva Rosalene
Male-to-Female
4049 / 1586 / 301
Регистрация: 06.01.2013
Сообщений: 4,176
Завершенные тесты: 2
18.08.2014, 12:42 #19
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: Поправил код
1
sweelemk
0 / 0 / 1
Регистрация: 16.09.2013
Сообщений: 127
18.08.2014, 12:43  [ТС] #20
FraidZZ, работает все)))
0
18.08.2014, 12:43
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
18.08.2014, 12:43
Привет! Вот еще темы с решениями:

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

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

Браузер клиента через JavaScript
Вопрос таков - есть ли средства JScript, позволяющие определить браузер...

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


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

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

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