JS Определить наличие текста в строчном тэге

Рейтинг: 0Ответов: 2Опубликовано: 26.01.2023

Имею подобную HTML конструкцию:

<article class="blog__item-gallery" id="item-gallery">
    <div class="blog__item-gallery-element blog__item-gallery-element-stretch">
        <p class="blog__item-gallery-element-text"></p>
        <img class="blog__item-gallery-element-img" src="img/content/blog/***.webp" alt="">
    </div>
    <div class="blog__item-gallery-element blog__item-gallery-element-stretch">
        <p class="blog__item-gallery-element-text"></p>
        <img class="blog__item-gallery-element-img" src="img/content/blog/***.webp" alt="">
    </div>
</article>

Задача: исходя из наличия теста в тэге <p> задать ему класс, если в содержимом тэга что-то написано.

Как в js определить наличие содержимого в этом, и подобных строчных тэгах?

javascript dom
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Эххх, а задачу то вообще без JS решить можно =) ну правда если у вас там декор классы

.blog__item-gallery-element-text {
  position: relative;
}

.blog__item-gallery-element-text:empty:after {
  position: absolute;
  top: 100%;
  left: 0;
  color: #f00;
  content: "Художествины фильм - Спиздили!";
}
<article class="blog__item-gallery" id="item-gallery">
  <div class="blog__item-gallery-element blog__item-gallery-element-stretch">
    <p class="blog__item-gallery-element-text"></p>
    <img class="blog__item-gallery-element-img" src="img/content/blog/***.webp" alt="">
  </div>
  <div class="blog__item-gallery-element blog__item-gallery-element-stretch">
    <p class="blog__item-gallery-element-text">Text</p>
    <img class="blog__item-gallery-element-img" src="img/content/blog/***.webp" alt="">
  </div>
</article>

Если DOM элемент ничего не выводит, его не надо выводить.

▲ 0

Получаете элемент.

const el = document.querySelector(".myclass");

Проверить есть ли в элементе текстовое содержимое можно с помощью свойства innerText

Проверка на пустосту. Если не пусто - добавляете класс.

if(el.innerText !== ''){
el.classList.add('yourClass')}