jQuery替换Firefox中损坏的方法

Question

我正在用jQuery从CSS文件中计算填充。我需要它是一个整数值，因此我使用.replace（）方法删除" PX"部分。

//calculate left and right padding on element
var padding_offset = $('#projects_menu').css("padding").replace('px', '')* 2;

当我执行警报时（padding_offset）;在Firefox中，它返回0。在Chrome，即Opera中，它返回当前偏移量减去" PX"部分，因此在这种情况下为" 20"。

这只是Firefox的错误吗？这里的解决方法是什么？

Answer 1

速记CSS属性不支持。如http://api.jquery.com/css/

所述

速记CSS属性（例如边距，背景，边框）不是 支持的。例如，如果您想检索渲染的保证金， 使用：$（elem）.css（'margintop'）和$（elem）.css（'marginright'），所以 在。

自从边距，填充，边界等以来，每个"子属性"都可以具有不同的值，这确实是合乎逻辑的。

Answer 2

您需要解析整数，然后才能乘以

var padding_offset = parseInt($('#projects_menu').css("padding").replace('px', ''), 10)* 2;

但是parseInt在字符串末端已经忽略了px，因此您不需要它

parseInt( $('#projects_menu').css("padding"), 10) * 2;

将其与Antonniklasson的答案结合在一起，您有工作代码（假设填充顶为您提供了您的需求）

parseInt( $('#projects_menu').css("paddingTop"), 10) * 2;

update

感谢Kato，他指出，如果您将属性设置为像素以外的其他任何东西，则这将不起作用。他创建了一个不错的jQuery助手，可以在单位之间转换https://github.com/zenovations/spritemation/blob/master/src/jquery.unitconverter.js