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

JavaScript

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

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

15.08.2014, 16:17. Просмотров 1462. Ответов 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
FraidZZ
NetUP | Developer
3905 / 1531 / 230
Регистрация: 06.01.2013
Сообщений: 4,054
Завершенные тесты: 1
18.08.2014, 13:41 #31
Что ж, попытка номер какая-то:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function(){
    var img = new Image();
    
    img.onload = (function () {      
        var widthImg = img.width;
        var heightImg = img.height;
        callbackFn(widthImg, heightImg);
    });
 
    img.src = ($('#anim').css('background-image').match(/url\s*\((.*?)\)/ig) || []).map(function (item){return item.replace(/url\s*\((.*?)\)/, "$1")})[0]
 
    function callbackFn(w, h){
       alert(w + "x" + h);
    };
})();
Добавлено через 1 минуту
Цитата Сообщение от sweelemk Посмотреть сообщение
каллбэк-функцию и как с ней раотать
Если совсем просто - вызывайте необходимый код сразу из onload, а не в продолжении скрипта.

Добавлено через 2 минуты
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function(){
    var img = new Image();
    
    img.onload = (function () {      
        var widthImg = img.width;
        var heightImg = img.height;
        callbackFn(widthImg, heightImg);
    });
 
    img.src = ($('#anim').css('background-image').match(/url\s*\((.*?)\)/ig) || []).map(function (item){return item.replace(/url\s*\(['"]?(.*?)['"]?\)/, "$1")})[0]
 
    function callbackFn(w, h){
       alert(w + "x" + h);
    };
})();
1
sweelemk
0 / 0 / 0
Регистрация: 16.09.2013
Сообщений: 127
18.08.2014, 14:24  [ТС] #32
FraidZZ, Спасибо! Теперь разобрался!
0
18.08.2014, 14:24
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
18.08.2014, 14:24
Привет! Вот еще темы с ответами:

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

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

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

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


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

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

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