0

Допустим, у меня есть условная шапка сайта:

<div class="parent">
  <div class="children">Наша компания</div>
  <div class="children">Вакансии</div>
  <div class="children">Наша почта</div>
</div>

И я хочу, чтобы с помощью javascript текст при медиа запросе @media (max-width: 768px) заменялся на следующий:

<div class="parent">
  <div class="children">Мы</div>
  <div class="children">Работа</div>
  <div class="children">Контакты</div>
</div>

Как мне это сделать, используя JS?

1 ответ 1

1

Вообще это можно сделать и без js, но вариант с JS:

HTML

    <div id="global-alert-queue" class="layout-wrapper">
    <div class="alert success animate-in" role="alert">
        Your submission was successful.
        <button id="dismiss-alert" class="dismiss" type="button" onClick="changeText()">Change</button>
    </div>
</div>

JS

    function changeText() {
    document.getElementsByClassName("animate-in")[0].firstChild.nodeValue = "Change Text";
}

Источник: https://stackoverflow.com/questions/30860282/javascript-modify-the-text-inside-the-div-class

Вариант с Jquery:

$('.divName').html('Замена текста внутри DIV');

Вариант с CSS:

Добавить в шапку оба ваших вариантов и скрыть одну из них:

<div class="parent">
  <div class="children">Наша компания</div>
  <div class="children">Вакансии</div>
  <div class="children">Наша почта</div>
</div>

<div class="mobile">
  <div class="children">Мы</div>
  <div class="children">Работа</div>
  <div class="children">Контакты</div>
</div>

@media (max-width: 768px) {
 .mobile {
  display: none;
 }
}

Ну чтобы можно было скрыть один из них смотря на размер через CSS.

2
  • Спасибо! Сделал все-таки без JS, используя CSS, так получилось проще всего) Кстати, не подскажите одну вещь: если делать то, что я спрашивал в вопросе с помощью фреймворка, то можно ли выполнить эту задачу не с помощью jquery, как Вы показывали, а с помощью React? Или эти фреймы все-таки для немного разных задач?
    – syrex
    24 авг 2022 в 15:05
  • К сожалению опыта в react у меня нет, но вы можете создать отдельный "топик" с тегом react и вам обязательно помогут :)
    – YaMus
    24 авг 2022 в 16:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.