Артём Мáлков

Как получить значения CSS-свойств «width» и «height» в процентах на JavaScript?

8 сен1 комм

Не так давно мне довелось разработать весьма интересный скрипт рейтинга для одного сайта. Основная задача была сделать моментальное (то есть без перезагрузки страницы) изменение рейтинга. В качестве его визуального представления был прогресс бар, в котором мне было необходимо получить ширину и затем ее изменить.

Первое, что мне пришло на ум – это получить значение ширины с помощью кода:

var width = $(".block").css("width");

Все бы хорошо, значение я получил. Но только значение не в процентах, а в пикселях. Если при половине рейтинга я должен был получить 50%, то получал значение, равное 286 пикселям.

Для написания корректной формулы 50 и 286 – существенная разница.

Немного покопавшись, я понял как решить эту проблему.

И итоговый результат у меня получился таким:

var width = $(".block").get(0).style.width; // Ширина блока 
var height = $(".block").get(0).style.height; // Высота блока 

Причем значение мы получаем точно такое, которое присвоено блоку (хоть проценты, хоть пиксели).

Обратите внимание! Для того чтобы получить свойства высоты и ширины таким способом, необходимо, чтобы стили были прописаны непосредственно в самом блоке, а не отдельно в CSS-файле.

Если же вам необходимо получить параметры этих свойств, прописанных отдельно, воспользуйтесь следующей конструкцией:

var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;

for(var i=0; i < rules.length; i++) {

	var rule = rules[i];

	if (rule.selectorText.toLowerCase() == ".block") {

		var width = rule.style.getPropertyValue("width");

	}

}

Где «.block» – идентификатор блока, а «width» – необходимый параметр (в нашем случае – ширина).

Рекомендуем к просмотру
Как показать только определенную область (элемент) в iframe?
Статьи и советы
Как запретить изменение размеров textarea на CSS/jQuery?
Статьи и советы
Как изменить стандартный курсор на сайте?
Статьи и советы
1
комментарий
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 1
    766
      •  Гости
    22 апр в 15:53

    Было бы хорошо если такие примеры были хотя бы в каком та рабочем примере, а не набором кода от большого проекта (

Подняться наверх
«Pandoge» - помощник вебмастера