如何使用jQuery从一个元素获取border-radius？ [英] How do I get the border-radius from an element using jQuery?

问题描述

我有一个div，使用下面的HTML和CSS。为了使我的Javascript代码更健壮，我试图从所选元素检索某些CSS属性。

I've got a div, with the following HTML and CSS. In an attempt to make my Javascript code more robust, I'm attempting to retrieve certain CSS attributes from the selected element.

我知道如何使用.css（）getter获取元素，但是如何使用该方法获取border-radius？

I know how to use the .css() getter to get elements, but how to get the border-radius using that method?

jQuery的文档很稀疏。

jQuery's documentation is sparse.

HTML：

<div id="#somediv"></div>

CSS：

#somediv {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

推荐答案

我猜官方支持，因为它有点不可预测...在Firefox使用 $（＃somediv）。css（ - moz-border-radius，20px）; 将设置边界半径精细，但尝试通过 $（＃somediv）读回它css（ - moz-border-radius）; 空字符串...但是，火狐似乎将边界半径扩展到其组成部分，意思是 $（＃somediv）css（ - moz-border-radius-topleft）; code>将工作（显然只返回一角的设置）。

I'm guessing it's not officially supported yet as it's a bit unpredictable... In Firefox using $("#somediv").css("-moz-border-radius", "20px"); will set the border radius fine, but trying to read it back via $("#somediv").css("-moz-border-radius"); returns an empty string... However, it appears that Firefox explodes the border radius into its component parts meaning $("#somediv").css("-moz-border-radius-topleft"); will work (obviously only returns one corner's settings though).

>：

Edit:

如 Tgr指出 $（'＃foo'）。css（'MozBorderRadius'）你在Firefox中一般读它。正如Bradley Mountford在下面的评论中指出的，看起来你可以使用组件部分从Webkit中读取（虽然只有chrome似乎像 border-top-left-radius ，其中Chrome和Safari会处理 -webkit-border-top-left-radius ...

As Tgr points out $('#foo').css('MozBorderRadius') will let you read it back generically in Firefox. And as Bradley Mountford points out in a comment below, it looks like you can read from Webkit using the component parts too (although only chrome seems to like border-top-left-radius, where as both Chrome & Safari handle -webkit-border-top-left-radius...

在Firefox

In Firefox:

$("#somediv").css("MozBorderRadius");             //"5px 5px 5px 5px"
$("pre").css("-moz-border-radius-topleft");       //"5px"

在Webkit中（在Chrome和Safari中测试）：

In Webkit (tested in Chrome & Safari):

$("pre").css("-webkit-border-top-left-radius");   //"5px 5px"

这篇关于如何使用jQuery从一个元素获取border-radius？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！