jQuery - css() 在 Firefox 中无法正常工作答案

【问题标题】：jQuery - css() not working properly in firefoxjQuery - css() 在 Firefox 中无法正常工作
【发布时间】：2013-07-18 05:32:05
【问题描述】：

我正在使用.css() 从元素中获取样式。但在 Firefox 中，.css() 没有从元素中获取 margin 和 padding 的值。

请看小提琴： http://jsfiddle.net/howtoplease/fMTsW/

这是我的 jquery 代码：

$(document).ready(function(){
    $('input').each(function(){
        this.value = $('h3').css(this.name);
    });
});

我的 html 代码

<h3 style="margin:20px;padding:20px;font-size:30px;font-family:'open sans';">
    I am heading 3
</h3>

<input name="margin" />
<input name="padding" />
<input name="font-size" />
<input name="font-family" />

【问题讨论】：

否，请仔细检查.. 等待您使用的是什么浏览器？？
我认为的最新版chrome。
我用的是最新的火狐
stackoverflow.com/a/590618/761793 诸如margin: 和padding: 之类的只是margin-top 等的快捷方式。来自文档：api.jquery.com/css“速记CSS 属性（例如边距、背景、边框）是不支持。例如，如果要检索渲染的边距，请使用：$(elem).css('marginTop') 和 $(elem).css('marginRight')，等等。"
@HowToPlease。这里是救援队。呵呵呵。 :)。现在我也明白了。非常感谢。

标签： jquery

【解决方案1】：

CSS 标签“margin & padding”实际上是四个独立的margin/padding 值的简写，top/left/bottom/right。使用 css('marginTop') 等 - 请注意，如果您以这种方式指定它们，它们最后会有 'px'。

在结果周围使用 parseInt() 将其转换为数值。

<input name="margin-top" />
<input name="padding-top" />

或

<input name="marginTop" />
<input name="paddingTop" />

这将为您提供价值。使用这种技术，您可以获得margin 和padding 的值。

【讨论】：

奇怪的是，速记在 Chrome 中的 jQuery 中有效，但在 jQuery Firefox 中无效。

【解决方案2】：

发生这种情况是因为 margin 和 padding 之类的属性是速记属性，而 jQuery 无法为您提供这些您使用独立值（例如 margin-top 和 margin-right）的值。

此外，应使用marginTop 访问包含多个单词（如margin-top）的属性，即第二个单词的第一个字母应为大写。

对于一组完整的值：

<input name="marginTop" />
<input name="marginRight" />
<input name="paddingTop" />
<input name="paddingRight" />
<input name="fontSize" />
<input name="fontFamily" />

【讨论】：

【解决方案3】：

在fiddle 的代码中，我尝试更改 HTML。

来自

<input name="margin"/>
<input name="padding"/>

到

<input name="margin-left"/>
<input name="padding-left"/>

并且值已正确设置在输入值字段中。这是因为 css 中的 margin 是一个关键字，它将诸如 margin-right、margin-left、margin-top、margin-bottom 等属性的值设置为一个值，但它本身并不是一个属性。

【讨论】：