根据视口大小更改href（无jquery）

Question

I want to be able to change a href depending upon window width: on initial page load and window resize (without jquery or other external libraries). Thank you!

Here is an experiment using an answer to a similar question: doesn't seem to be working for me. https://codepen.io/marcusdeacey/pen/wLLNXb

HTML

<a id="myLink" href="http://highresolutionurl">My Link</a>

JS

if (screen.width < 768) {
    document.getElementById('myLink').setAttribute('href', "http://highresolutionurl");
}
else if {
    document.getElementById('myLink').setAttribute('href', "http://lowresolutionurl");
}

Answer 1

There's a JavaScript variable called screen.width which is pretty self explanatory, it gets the screens width. So for example:

if (screen.height > screen.width) {
  //This means your on a mobile device so if you wanted people on mobile to go to mobile support instead of desktop support you could use this method
}
else {
  //do something
}
//or you could just
if (screen.width == 1360) {
  //Do this for people with only 1360 pixel wide screens
}
else {
  //Do this for people without 1360 pixel screens
}

Answer 2

screen.width doesn't change unless you change the display settings on your computer or mobile device. If you want this link to change dynamically with the width of the window , you need either window.innerWidth or window.outerWidth .

If you want this to change dynamically, you can't just do it once, you need to monitor changes in window size.

var myLink = document.getElementById('myLink');

function setLink() {
  if (window.innerWidth < 768) {
    myLink.setAttribute('href', "http://highresolutionurl");
  }
  else {
    myLink.setAttribute('href', "http://lowresolutionurl");
  }
}

setLink();

window.addEventListener('resize', setLink);