Question

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

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

jQuery的文档很少。

HTML：

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

CSS：

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

Answer 1

我猜它还没有正式支持，因为它有点不可预测......在Firefox中使用$("#somediv").css("-moz-border-radius", "20px");会将边框半径设置得很好，但尝试通过$("#somediv").css("-moz-border-radius");读取它会返回一个空的string ...然而，似乎Firefox将边界半径分解为其组成部分，这意味着$("#somediv").css("-moz-border-radius-topleft");将起作用（显然只返回一个角落的设置）。

修改：

由于Tgr points out $('#foo').css('MozBorderRadius')会让您在Firefox中一般性地阅读它。正如Bradley Mountford在下面的评论中指出的那样，看起来你也可以使用组件来阅读Webkit（尽管只有chrome看起来像border-top-left-radius，Chrome和Safari处理-webkit-border-top-left-radius ...

总结一下，您会得到以下内容（基于5px设置）：

在Firefox中：

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

在Webkit中（在Chrome＆amp; Safari中测试）：

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

Answer 2

至少在Firefox中，使用$('#foo').css('MozBorderRadius')阅读有效。 $('#foo').css('-moz-border-radius')没有，即使它在设置值时有效。

Answer 3

以前的答案对我不起作用。

以下代码适用于Firefox和Chrome，并且会为每个角提供边框半径 - 但仅适用于带ID的元素。不过没有jQuery。

更多信息here：]

function getStyle(oElm, css3Prop) {

  var strValue = "";

  if (window.getComputedStyle) {
    strValue = getComputedStyle(oElm).getPropertyValue(css3Prop);
  }
  //IE
  else if (oElm.currentStyle) {
    try {
      strValue = oElm.currentStyle[css3Prop];
    } catch (e) {}
  }

  return strValue;
}

//call as follows
var brTopLeft = getStyle(document.getElementById("element"), "border-top-left-radius");
var brTopRight = getStyle(document.getElementById("element"), "border-top-right-radius");
var brBottomRight = getStyle(document.getElementById("element"), "border-bottom-right-radius");
var brBottomLeft = getStyle(document.getElementById("element"), "border-bottom-left-radius");


document.getElementById("br-tl").innerHTML = brTopLeft;
document.getElementById("br-tr").innerHTML = brTopRight;
document.getElementById("br-br").innerHTML = brBottomRight;
document.getElementById("br-bl").innerHTML = brBottomLeft;

#element {
  height: 50px;
  width: 50px;
  margin: 20px;
  border: 2px solid black;
  border-radius: 5px 10px 14px 23px;
}

<div id="element"></div>

<p>Border-radius-top-left: <span id="br-tl"></span>
</p>
<p>Border-radius-top-right: <span id="br-tr"></span>
</p>


<p>Border-radius-bottom-left: <span id="br-bl"></span>
</p>
<p>Border-radius-bottom-right: <span id="br-br"></span>
</p>

如何使用jQuery从元素中获取border-radius？

3 个答案: