Jquery: как проверить, имеет ли элемент определенный класс/стиль css
у меня есть div:
<div class="test" id="someElement" style="position: absolute"></div>
есть ли способ проверить, если определенный элемент:
$("#someElement")
имеет определенный класс (в моем случае "тест").
кроме того, есть ли способ проверить, что элемент en имеет определенный стиль? В этом примере я хотел бы знать, имеет ли элемент "position: absolute
".
спасибо!
7 ответов:
стили CSS-это пары ключ-значение, а не только "теги". По умолчанию каждый элемент имеет полный набор стилей CSS, назначенных ему, большинство из них неявно использует настройки браузера по умолчанию, а некоторые из них явно переопределены в таблицах стилей CSS.
чтобы получить значение, присвоенное определенной записи CSS элемента и сравнить его:
if ($('#yourElement').css('position') == 'absolute') { // true }
Если вы не переопределили стиль, вы получите браузер по умолчанию для этого конкретного элемента.
Я нашел одно решение:
$("#someElement")[0].className.match("test")
но почему-то я считаю, что есть лучший способ!
или, если вам нужно получить доступ к элементу, который имеет это свойство, и он не использует идентификатор, вы можете пойти по этому маршруту:
$("img").each(function () { if ($(this).css("float") == "left") { $(this).addClass("left"); } if ($(this).css("float") == "right") { $(this).addClass("right"); } })
вопрос задает две разные вещи:
- элемент имеет определенный класс
- элемент имеет определенный стиль.
на второй вопрос уже дан ответ. Для первого, я бы сделал это так:
if($("#someElement").is(".test")){ // Has class test assigned, eventually combined with other classes } else{ // Does not have it }
Если вы используете jQuery, и хотите проверить по определенному стилю, то ваш код будет
if($('#someElement').css('position', 'absolute')) { ... do something ... } else { ... do something else ... }
& Если вы хотите проверить по классу, то,
if($('#someElement').hasClass('test')) { ... do something ... } else { ... do something else ... }
jQuery CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>