Как я могу получить border-radius от элемента, используя jQuery?

Question

У меня есть div со следующими HTML и CSS. В попытке сделать мой код Javascript более надежным, я пытаюсь извлечь определенные атрибуты CSS из выбранного элемента.

Я знаю, как использовать метод получения .css () для получения элементов, но как получить радиус границы, используя этот метод?

Документация 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"); возвращает пустую строку ... Тем не менее, похоже, что Firefox разбивает радиус границы на его составные части, что означает, что $("#somediv").css("-moz-border-radius-topleft"); будет работать (хотя, очевидно, возвращает только настройки одного угла).

---

Редактировать

Как указывает Tgr, $('#foo').css('MozBorderRadius') позволит вам в общем случае прочитать его обратно в Firefox. И, как указывает Брэдли Маунтфорд в комментарии ниже, похоже, что вы также можете читать из 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"

Answer 2

По крайней мере в Firefox, чтение с $('#foo').css('MozBorderRadius') работает. $('#foo').css('-moz-border-radius') нет, даже если он работает при установке значения.

Answer 3

Предыдущие ответы у меня не сработали.

Приведенный ниже код работает для меня в Firefox и Chrome и предоставляет граничный радиус для каждого угла - но только для элемента с идентификатором. Нет jQuery, хотя.

Подробнее здесь :]

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>