Как при достижении условного брейкпоинта ширины экрана сменить через js href у ссылки?

Question

[Dpy3b]

Как при достижении условного брейкпоинта ширины экрана сменить через js href у ссылки? Допустим у меня есть сслыка-якорь, href изначально прокручивает до нужной секции по id. Как мне при уменьшении ширины экрана заставить ссылку вести на другую секцию? Ниже пробовал чето придумать, но не вышло, я нубас в js.

if (document.documentElement.clientWidth <= 991.98){
    let sectionExamplesFoundation = document.querySelectorAll('.order-project__more-details-btn');
    sectionExamplesFoundation.href='examples-foundation-640';
}

Answer 1

[tehfreak]

Вот современный способ проверки на соответствие медиавыражению:

if (window.matchMedia('(max-width: 700px)').matches) {
  for (const linkElement of document.querySelectorAll('.order-project__more-details-btn')) {
    linkElement.setAttribute('href', 'examples-foundation-640')
  }
}

А вот документация: https://developer.mozilla.org/ru/docs/Web/API/Wind...

Comments

[alexalexes]

Схоронил. Даже поздний ie понимает такое - это прекрасно.

Answer 2

[y0u]

const links = document.querySelectorAll('.order-project__more-details-btn');
const BREAKPOINT = 700;

if (window.innerWidth < BREAKPOINT) {
  links.forEach((link) => {
    link.href = '#link2';
  });
}

Comments

[Dpy3b]

Наверное я в неправильной форме задал вопрос... Я просто на другую кнопку ещё нажал сначала) Причем здесь window.addEventListener resize вообще? Никаких событий с окном, тем более с его шириной не должно происходить. Ну т.е. это не тот контекст. Контекста как-бы нет по умолчанию, только условие что если ширина < определенной, то href ссылки должен быть не тот что по умолчанию...

[y0u]

Dpy3b,

Как мне при уменьшении ширины экрана...

Формулируйте вопрос более четко.

Если вам нужно определить это в момент загрузки скрипта, оставьте всё, кроме
window.addEventListener('resize', () => {

[Dpy3b]

y0u, спасибо огромное, выручил)

Answer 3

[Андрей Мартынкевич]

Атрибуты для элементов дом в JS устанавливаются через метод setAttribute(имя атрибута, значение).