Вычисление значений CSS с помощью jQuery и ems

Question

Я должен использовать рассчитанное значение для проекта. Лучше всего будет использовать CSS3 calcприписывать. Однако это не поддерживается собственным браузером Android Webview. Поэтому самый простой способ, который я нашел, - использовать jQuery для обработки этого поведения:

$(element).css('width','100%').css('width','-=100px');

Проблема в том, что на этот раз мне нужно использовать значение em вместо значения px:

$(element).css('width','100%').css('width','-=1em');

Это не будет работать.

У вас есть какое-нибудь (простое) решение для решения этой проблемы?

Answer 1

Тебе лучше всего делать математику без ems. Если вы не объявите размер шрифта для элемента, 1em будет равен 16px.

Answer 2

Лучше всего создать переменную для расчета.

var calc = 0;

Затем используйте эту переменную для вывода вашего нового значения.

calc = $(element).width() - 100;

Запишите это значение в вашу консоль, чтобы убедиться, что вы в порядке со значением.

console.log(calc);

Как только вы согласитесь с этим, вы сможете использовать его при настройке ширины в CSS

$(newElement).css({"width" , calc + "px"}); 
//Note: this syntax allows for multiple attributes to be applied to an element.

Если вам нужна дополнительная помощь, то я создал JSFiddle, где вы можете.. fiddle. http://jsfiddle.net/Fp7qp/

Надеюсь это поможет!