Question

来自：Pro PHP和jQuery：

■提示返回的值是CSS简写属性.3添加 jQuery的好处是能够使用CSS设置CSS属性简写，使用基本JavaScript无效。

来自jQuery API参考：

速记CSS属性（例如边距，背景，边框）不是支持的。例如，如果要检索渲染边距，使用：$（elem）.css（'marginTop'）和$（elem）.css（'marginRight'）等等上。

我很困惑，可以设置css速记，但不能读？当然我只会使用样式表，但问题是学术启发。

Answer 1

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

但是，除非特别编程，否则无法完成相反的过程。

例如，您可以对阅读器进行编程以检测margin等速记属性，并返回连接的margin-top，margin-right，margin-bottom和margin-left。

也就是说，速记有几种可能性。例如，margin: 10px 20px仍会设置所有四个边距，但检索它可能会产生10px 20px 10px 20px，这与输入的不同。

基本上，长话短，简写属性恰好转化为一组单独的属性，但是一组单独的属性可能会导致几个可能的缩写。

Answer 2

使用getter方法.css（propertyName）方法获取时，jquery css shorthands不起作用。

您可以使用css简写来定义css规则：

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

<强> DEMO

Answer 3

如果你使用的是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礼仪。

jQuery和用速记设置CSS

3 个答案: