Как я получаю радиус границы от элемента с помощью jQuery?
У меня есть отделение со следующим HTML и CSS. В попытке сделать мой код JavaScript более устойчивым, я пытаюсь получить определенные атрибуты CSS от выбранного элемента.
Я знаю, как использовать .css () метод считывания для получения элементов, но как получить радиус границы с помощью того метода?
документация jQuery редка.
HTML:
<div id="#somediv"></div>
CSS:
#somediv {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
2 ответа
Я предполагаю, что это еще не поддерживается официально, поскольку это немного непредсказуемо... В 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"
По крайней мере, в Firefox чтение с $ ('# foo'). Css ('MozBorderRadius') работает. $ ('# foo'). Css ('- moz-border-radius') нет, хотя он работает при установке значения.