在Firefox 14.0.1中使用jQuery获取CSS边框值 [英] Getting CSS border value with jQuery in Firefox 14.0.1

问题描述

我在Firebug控制台中运行以下代码。

  $（'img'）css 'solid 2px red'）。css（'border'）; 
  

红色图像边框出现，但它返回一个空字符串，为什么是这样？

它在Chrome和Safari开发者工具中正常工作。

更新：jQuery文档说在获取CSS值时不支持速记属性。但是，我也在Firefox中尝试了下面的例子（所有的工作在Chrome和Safari中）。

  $（'img'） .css（'border-style'，'solid'）。css（'border-style'）; 
 $（'img'）。css（'borderStyle'，'solid'）。css（'borderStyle'）; 
 $（'img'）。css（'border'，'solid 2px green'）css（'borderStyle'）; 
  

解决方案

引用 .css docs。

不支持Shorthand CSS属性（例如边距，背景，边框）。例如，如果要检索渲染边距，请使用： $（elem）.css（'marginTop'）和 $（elem）。 https://developer.mozilla.org/en-US/docs/CSS/border> border ，您需要使用 border-width ， border-style 和 border-color p>



例如 border-color ：

  $（'img'）。css 'border-top-color'，'red'）css（'borderTopColor'）; 
 $（'img'）。css（'border-right-color'，'red'）css（'borderRightColor'）; 
 $（'img'）。css（'border-bottom-color'，'red'）css（'borderBottomColor'）; 
 $（'img'）。css（'border-left-color'，'red'）。css（'borderLeftColor'）; 
  




I run the following code in the Firebug console.

$('img').css('border', 'solid 2px red').css('border');

The red image borders appear, but it returns an empty string, why is this?

It works fine in Chrome and Safari developer tools.

Update: The jQuery docs say that shorthand properties are not supported when getting CSS values. However I have also tried the following with no luck in Firefox (All work in Chrome and Safari)

$('img').css('border-style', 'solid').css('border-style');
$('img').css('borderStyle', 'solid').css('borderStyle');
$('img').css('border', 'solid 2px green').css('borderStyle');

解决方案

Quoting .css docs.

Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.

For the case of border, you need to use the border-width, border-style and border-color related properties.

e.g. border-color:

$('img').css('border-top-color', 'red').css('borderTopColor');
$('img').css('border-right-color', 'red').css('borderRightColor');
$('img').css('border-bottom-color', 'red').css('borderBottomColor');
$('img').css('border-left-color', 'red').css('borderLeftColor');

这篇关于在Firefox 14.0.1中使用jQuery获取CSS边框值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！