Преобразование сформулированных значений CSS в числовые
Когда я звоню window.getComputedStyle()
на элементе и попытайтесь получить свойство, такое как lineHeight, которое может иметь как сформулированные, так и числовые значения, есть ли способ или другая функция, которая будет возвращать числовое значение каждый раз?
мой line-height
пример относится к normal
ключевое слово. Другие примеры включают вес шрифта и ширину границы. Все они используют ключевые слова, но отображаются на числовые значения.
2 ответа
Нет. Потому что не всегда есть картография.
Пример:
<div></div>
JS:
alert(getComputedStyle(document.body.children[0]).width);
// alerts "auto"
Теперь... какое числовое значение удовлетворит это?
Если вы ссылаетесь на тот факт, что возвращаемое значение может содержать px
или другие единицы, вы можете использовать parseInt
функция:
function getTheStyle(elem,property)
{
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue(property);
return parseInt(theCSSprop);
}
var element = document.getElementById('test');
alert(getTheStyle(element,"height"));
Вот скрипка Вместо возвращения 100px
это возвращается 100
Вы можете извлечь единицы следующим образом:
var str = "100em";
var matches = str.match(/([a-z]+)$/gi);
alert(matches);
Редактировать:
По-видимому, normal
может быть установлено "разумным" значением пользовательским агентом и является специфичным для шрифта, где спецификация рекомендует, чтобы это было между 1.0 и 1.2. Таким образом, вам, вероятно, будет лучше рассчитать это height
имущество.
нормальный
Сообщает пользовательским агентам установить "разумное" значение для используемого значения на основе шрифта элемента. Значение имеет то же значение, что и < число >. Мы рекомендуем использовать значение для "нормального" в диапазоне от 1,0 до 1,2. Вычисленное значение является " нормальным ".