jQuery和使用速记设置CSS

From:Pro-PHP和jQuery:

■ 提示：返回的值是CSS速记属性 jQuery的好处是能够使用CSS设置CSS属性 速记，这在使用基本JavaScript时不起作用

来自jQuery API参考：

简写CSS属性（例如边距、背景、边框）不可用 支持。例如，如果要检索渲染的边距， 使用：$（elem.css（'marginTop'）和$（elem.css（'marginRight'），依此类推 开

---

我很困惑，css速记可以设置，但不能阅读？当然，我会简单地使用样式表，但是，问题是为了学术教益。

您可以设置速记CSS属性，因为它们被应用并解释为个人样式

但是，除非专门编程，否则无法执行反向过程

例如，您可以对读取器进行编程，以检测类似于

margin

的速记属性，并返回串联的

margin top

、

margin right

、

margin bottom

和

margin left

也就是说，速记有几种可能。例如，

margin:10px 20px

仍然设置所有四个边距，但检索它可能会产生

10px 20px 10px 20px

，这与输入的内容不同

---

基本上，长话短说，速记属性转换为一组单独的属性，但是一组单独的属性可能会导致几种可能的速记。

当使用getter方法.css（propertyName）方法获取它们时，jquery css速记不起作用

您可以使用css速记明确设置css规则：

$('div').css("border", "2px solid Black");

---

如果您使用的是firefox或chrome，请打开控制台。键入以下内容：

jQuery(".post-text"); // will select the post of this answer, you should see it in the console
jQuery(".post-text").css("margin"); // will be "", the shorthand returns NOTHING
jQuery(".post-text").css("margin-top"); // will be "0px", the real notation works
jQuery(".post-text").css("margin","10px 10px 10px 10px"); // we just set all margins with shorthand, you should notice a change in the UI of stackoverflow.
jQuery(".post-text").css("margin-top"); // is "10px" now
jQuery(".post-text").css("margin"); // is still ""

---

我希望这能澄清这个概念。简短回答：您可以设置，但不能获得css的速记属性。

没错。即使您可以使用CSS速记设置属性，浏览器仍会将这些属性分解为各自的部分（这是计算样式）。元素在浏览器中没有“margin”属性，它们将具有“margin top”、“margin right”、“margin bottom”、“margin left”。