Преобразовать непиксельное значение CSS в px

Question

Преобразовать непиксельное значение CSS в px

0

Поскольку некоторые параметры измерения в css не всегда находятся в значениях px, как может быть такое непиксельное значение, преобразованное в px?

Пусть

var x = $('#element').css('parameter');

и пусть говорят, что значение такой переменной x равно 1.2em или какой-либо другой строке, содержащей не только число, но и информацию о типе измерения (px, em, pt, cm, in ,...).

Что такое все-браузерное решение для преобразования такой string в integer с результатами в px?

Ωmega 02 окт. 2013, в 16:31

Источник

3

jQuery уже делает это: jsfiddle.net/j08691/2WQqF
j08691 02 окт. 2013, в 14:26
0

^^ Не знал этого. Опубликовать как ответ? И знаете ли вы, как jQuery это делает (я думаю, если бы я хотел сделать то же самое без jQuery)?
Zach Saucier 02 окт. 2013, в 14:26
0

Я не знал, что jQuery сделал это, это здорово знать! Я хотел конвертировать в EMS по пикселям.
Josh Powell 02 окт. 2013, в 14:28
0

@j08691 j08691 - Для каких параметров jquery получить значение px ? В самом деле? Но что, если у меня есть такое значение в строке, то что / как ..?
Ωmega 02 окт. 2013, в 14:28
0

Что вы имеете в виду, имея значение в string ?
Selvakumar Arumugam 02 окт. 2013, в 14:28
0

@Vega - просто: var x = '2.4em';
Ωmega 02 окт. 2013, в 14:29
0

@Archer - прочитайте последнюю строчку в моем вопросе. Я ничего не меняю ...
Ωmega 02 окт. 2013, в 14:32
1

@Ωmega Ωmega Вы можете использовать какое-то преобразование, но проще установить его на временный div, получить его параметр и удалить div.
Selvakumar Arumugam 02 окт. 2013, в 14:32
0

Ладно моё плохое Я приношу извинения. Несчастное количество людей на этом сайте увеличивает мой цинизм. И ^^ что сказал Вега. Собирался сказать то же самое сам :)
Archer 02 окт. 2013, в 14:33
0

ParseInt == 55 ( "55 пикселей")
dandavis 02 окт. 2013, в 15:21
0

@dandavis - parseInt("2.3em") не получит результат в px
Ωmega 02 окт. 2013, в 15:32
0

Я считаю, что значение рассчитывается с getComputedStyle метода getComputedStyle . Это громоздкий интерфейс для использования, но хорошо поддерживается кросс-браузер.
Nick Husher 02 окт. 2013, в 15:35
0

хотя мы прошли через ems и должны были нумеровать результат "npx". используйте стиль applyStyle / getComputed, чтобы превратить ems в px.
dandavis 02 окт. 2013, в 15:52

Показать ещё 11 комментариев

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

jQuery уже делает это: jsfiddle.net/j08691/2WQqF
^^ Не знал этого. Опубликовать как ответ? И знаете ли вы, как jQuery это делает (я думаю, если бы я хотел сделать то же самое без jQuery)?
Я не знал, что jQuery сделал это, это здорово знать! Я хотел конвертировать в EMS по пикселям.
@j08691 j08691 - Для каких параметров jquery получить значение px ? В самом деле? Но что, если у меня есть такое значение в строке, то что / как ..?
Что вы имеете в виду, имея значение в string ?
@Archer - прочитайте последнюю строчку в моем вопросе. Я ничего не меняю ...
@Ωmega Ωmega Вы можете использовать какое-то преобразование, но проще установить его на временный div, получить его параметр и удалить div.
Ладно моё плохое Я приношу извинения. Несчастное количество людей на этом сайте увеличивает мой цинизм. И ^^ что сказал Вега. Собирался сказать то же самое сам :)
@dandavis - parseInt("2.3em") не получит результат в px
Я считаю, что значение рассчитывается с getComputedStyle метода getComputedStyle . Это громоздкий интерфейс для использования, но хорошо поддерживается кросс-браузер.
хотя мы прошли через ems и должны были нумеровать результат "npx". используйте стиль applyStyle / getComputed, чтобы превратить ems в px.

Nick Husher · Answer 1 · 2013-10-02T14-01-00.000Z

Вы можете использовать встроенный метод getComputedStyle который будет интерполировать любое значение non- px в пикселях. Например:

var el = document.getElementById('foo'); // has a relative font size

console.log(el.style.fontSize); // "5em"
console.log(window.getComputedStyle(el).fontSize); // "80px"

Оттуда вы можете преобразовать в целое число.

Пример документации JsBin и MDN.

Только для IE9 + ( developer.mozilla.org/en-US/docs/Web/API/… )
Да, вы можете использовать нестандартное свойство currentStyle в IE, если вам необходимо поддерживать IE8 или более currentStyle .

Ashish Maradiya · Answer 2 · 2015-01-03T04-58-00.000Z

$("#element").css("padding","2em")
var value = parseInt($("#element").css("font-size"));
var padding = 2*value ;
console.log(padding);