Javascript 根据视口大小更改href（不带jquery）

我希望能够根据窗口宽度更改a href：在初始页面加载和窗口大小调整时（没有jquery或其他外部库）。 谢谢大家!

下面是一个实验，它使用了一个类似问题的答案：似乎对我不起作用

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");
}

if（屏幕宽度<768）{
document.getElementById（'myLink'）.setAttribute（'href'，”http://highresolutionurl");
}
否则如果{
document.getElementById（'myLink'）.setAttribute（'href'，”http://lowresolutionurl");
}

有一个名为screen.width的JavaScript变量，它非常简单，可以获取屏幕宽度。例如：

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
}

---

有一个名为screen.width的JavaScript变量，它很容易解释，它获取屏幕宽度。例如：

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
}

---

screen.width

不会更改，除非您更改计算机或移动设备上的显示设置。如果希望此链接随窗口宽度动态更改，则需要

window.innerWidth

或

window.outerWidth

如果您想动态地改变它，您不能只做一次，您需要监视窗口大小的变化

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);

var myLink=document.getElementById（'myLink'）；
函数setLink（）{
如果（窗内宽度<768）{
myLink.setAttribute（'href'，”http://highresolutionurl");
}
否则{
myLink.setAttribute（'href'，”http://lowresolutionurl");
}
}
setLink（）；
window.addEventListener（'resize'，setLink）；

屏幕。除非您更改计算机或移动设备上的显示设置，否则宽度不会更改。如果希望此链接随窗口宽度动态更改，则需要
window.innerWidth
或
window.outerWidth

如果您想动态地改变它，您不能只做一次，您需要监视窗口大小的变化

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);

var myLink=document.getElementById（'myLink'）；
函数setLink（）{
如果（窗内宽度<768）{
myLink.setAttribute（'href'，”http://highresolutionurl");
}
否则{
myLink.setAttribute（'href'，”http://lowresolutionurl");
}
}
setLink（）；
window.addEventListener（'resize'，setLink）；
谢谢！不幸的是，在我的笔下，这似乎不适用于我。你能帮我吗？@mb_dc2008耶！那么你想要达到的确切目标是什么呢？谢谢！我正在尝试链接到wordpress页面（）上的锚定组件。在较小的屏幕（768以下）上，画布元素将替换为视频组件，并且锚定链接将更改（）。如果用户在大屏幕上，我想链接到canvas元素，但是如果在小屏幕上，我想链接到视频组件。谢谢！不幸的是，在我的笔下，这似乎不适用于我。你能帮我吗？@mb_dc2008耶！那么你想要达到的确切目标是什么呢？谢谢！我正在尝试链接到wordpress页面（）上的锚定组件。在较小的屏幕（768以下）上，画布元素将替换为视频组件，并且锚定链接将更改（）。如果用户在大屏幕上，我想链接到canvas元素，但是如果在小屏幕上，我想链接到视频组件。很好用！非常感谢。作品非常感谢。