代码之家 › 专栏 › 技术社区 › S Pangborn

如何使用jquery从元素中获取边界半径?

css html jquery

S Pangborn · 技术社区 · 16 年前

我有一个DIV,包含以下HTML和CSS。为了使我的javascript代码更加健壮,我尝试从所选元素中检索某些CSS属性。

我知道如何使用.css()getter获取元素,但如何使用该方法获取边界半径?

jquery的文档是稀疏的。

HTML:

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

CSS:

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

3 回复 | 直到 11 年前

Community Mohan Dere 9 年前

我猜它还没有得到官方的支持,因为它有点不可预测…在Firefox中使用 $("#somediv").css("-moz-border-radius", "20px"); 将设置边界半径,但尝试通过 $("#somediv").css("-moz-border-radius"); 返回空字符串…然而,似乎火狐将边界半径分解为其组成部分,这意味着 $("#somediv").css("-moz-border-radius-topleft"); 有效(显然只返回一个角的设置)。

编辑 :

AS 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&Safari中测试):

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

Tgr 16 年前

至少在火狐中,用 $('#foo').css('MozBorderRadius') 作品。 $('#foo').css('-moz-border-radius') 不会,即使它在设置值时工作。

karsin 11 年前

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

下面的代码在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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前