как редактировать css внутри javascript

ProgramBox

как редактировать css внутри javascript

Post author:admin
Запись опубликована:23 марта, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть логотип на моем веб-сайте, когда пользователь открывает мой веб-сайт, логотип большой, но когда он прокручивает, он становится маленьким. я сделал это с помощью javascript, как показано ниже

 window.onscroll = function() {
    growShrinkLogo()
  };

  function growShrinkLogo() {
    var Logo = document.getElementById("logo")
    if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
      Logo.style.width = '80px';
    } else {
      Logo.style.width = '200px';
    }
  }

 <div   class="logo">
        <div class="relative-logo">
          <img id="logo" src="assets/images/logo.png" alt="logo">
        </div>
      </div>

первый логотип, который появляется, немного смещен вправо по направлению к странице, а второй правильно расположен по центру, как на изображениях ниже

когда я пытаюсь переместить логотип большего размера, это влияет на маленький логотип, потому что оба они находятся в одном div. как я могу сделать логотип большего размера, который появляется при загрузке страницы в центр, не влияя на логотип меньшего размера. кто-нибудь может помочь

1. margin: auto может помочь?

2. Где другой логотип?

3. @mplungjan но оба логотипа находятся в одном div

4. @Adriani6 оба являются одним логотипом, просто использовал js, чтобы сделать его большим и маленьким

5. Вот так: .logo { width:100%; text-align:center } #logo {margin:auto}

Ответ №1:

 window.onscroll = function() {
  growShrinkLogo();
};

function growShrinkLogo() {
  var Logo = document.getElementById("logo");

  if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
    Logo.style.width = '80px';
    Logo.style.marginLeft = '60px';
  } else {
    Logo.style.width = '200px';
    Logo.style.marginLeft = '0px';
  }
}

 <div class="logo">
  <div class="relative-logo">
    <img id="logo" src="assets/images/logo.png" alt="Logo" />
  </div>
</div>

Это сработает, если вы еще не определили поле в своем CSS и вместо этого использовали position. Я думаю ….. попробуйте.

Ответ №2:

Есть несколько способов добиться этого.

Используйте два разных элемента HTML (два логотипа), а затем скрывайте / показывайте их, аналогично тому, как вы изменяете CSS одного элемента. Таким образом, вы можете изменять CSS каждого логотипа независимо.
Измените CSS вашего основного логотипа для загрузки страницы, а затем исправьте его с помощью JavaScript (в основном, удалите все, что вы добавили для большого)

Обновить:

После повторного прочтения вашего вопроса я думаю, что понимаю.

Попробуйте добавить это в свой CSS (обновите в соответствии с вашими потребностями):

 .relative-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

Это должно выровнять по центру оба ваших логотипа и заставить их оставаться по центру независимо от их размера.

1. @ZubairShah Я обновил свой ответ, думаю, я понимаю, что вам нужно сейчас.

2. но ширина не увеличивается, как я хочу

3. Я не понял ваш последний комментарий. Ваш вопрос how can i make the bigger logo which appears when the page load to the center without effecting the smaller logo . Вы никогда не упоминали, что ширина не увеличивается.

4. ширина увеличивается в моем javascript

5. но когда я использую ваш код, ширина не увеличивается, его размер немного больше, чем мой логотип меньшего размера, но он не изменяет размер, который я указал в своем js. перед использованием кода ur он работал правильно

Ответ №3:

Вы поместили script перед тегом close body? Я попробовал ваш код, он все еще меняет ширину?

 window.onscroll = function() {
  growShrinkLogo()
};

function growShrinkLogo() {
  var Logo = document.getElementById("logo")
  if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
    Logo.style.width = '80px';
  } else {
    Logo.style.width = '200px';
  }
}

 <div class="logo">
  <div class="relative-logo">
    <img id="logo" src="http://pngimg.com/uploads/google/google_PNG19644.png" alt="logo">
  </div>
</div>
<div>
  
</div>