Генератор устойчивых к взлому паролей

Мы выражаем благодарность всем тем людям, которые в большей или меньшей степени помогают развитию проекта. Тем, что задает нам интересные вопросы и указывает на ошибки в работе нашего сайта. Спасибо вам!

Если у вас есть темы для будущих статей, другие вопросы или предложения – прислать их вы можете через форму обратной связи.

Артем Мáлков
88 просм
0 комм
Поделиться

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

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

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

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» – необходимый параметр (в нашем случае – ширина).

0
комментарий
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария