Преобразование сформулированных значений CSS в числовые

Question

Когда я звоню window.getComputedStyle() на элементе и попытайтесь получить свойство, такое как lineHeight, которое может иметь как сформулированные, так и числовые значения, есть ли способ или другая функция, которая будет возвращать числовое значение каждый раз?

мой line-height пример относится к normal ключевое слово. Другие примеры включают вес шрифта и ширину границы. Все они используют ключевые слова, но отображаются на числовые значения.

Answer 1

Нет. Потому что не всегда есть картография.

Пример:

<div></div>

JS:

alert(getComputedStyle(document.body.children[0]).width);
// alerts "auto"

Теперь... какое числовое значение удовлетворит это?

Answer 2

Если вы ссылаетесь на тот факт, что возвращаемое значение может содержать 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. Вычисленное значение является " нормальным ".

Вот подробный пост в блоге об этом.