Fatal编程技术网
  • javascript/
  • Javascript 如果主体宽度最大为500px，我想添加一个按钮

Javascript 如果主体宽度最大为500px，我想添加一个按钮

javascript jquery

Javascript 如果主体宽度最大为500px，我想添加一个按钮,javascript,jquery,Javascript,Jquery,每当我尝试调整浏览器窗口的大小时，该按钮都会出现几次 ，我怎样才能解决这个问题。如果浏览器的大小调整为500px或更小，我希望如此 应添加div，如果宽度高于500px，则应移除div。这是JS文件 function sizer(){const mq = window.matchMedia( "(max-width:500px)" ) if(mq.matches) { let loginDiv= document.createElement('div'), aTag = docum

每当我尝试调整浏览器窗口的大小时，该按钮都会出现几次 ，我怎样才能解决这个问题。如果浏览器的大小调整为500px或更小，我希望如此 应添加div，如果宽度高于500px，则应移除div。这是JS文件

function sizer(){const mq = window.matchMedia( "(max-width:500px)" )

if(mq.matches)
{
 let loginDiv= document.createElement('div'),
     aTag = document.createElement('a');
     aTag.setAttribute('href','#');
     aTag.innerHTML="Login/Sign Up";
     loginDiv.className='login';// style in search.css
     document.getElementsByClassName('drp')[0].appendChild(loginDiv);
     loginDiv.appendChild(aTag);

}
else{
  document.getElementsByClassName("login").remove();
}
}
这里从body标签调用Sizer，如下所示

<body onresize="sizer()">

您可以使用媒体查询
@media（最大宽度：500px）
根据屏幕宽度有条件地显示/隐藏按钮。这种用例不需要使用Javascript

#我的按钮{
显示：无；
}
@介质（最大宽度：500px）{
#我的按钮{
显示：块；
}
}

点击我
您可以使用媒体查询
@media（最大宽度：500px）
根据屏幕宽度有条件地显示/隐藏按钮。这种用例不需要使用Javascript

#我的按钮{
显示：无；
}
@介质（最大宽度：500px）{
#我的按钮{
显示：块；
}
}

点击我
我想使用javascript动态添加一个按钮only@ParasKumar更新了我的答案，以显示如何使用
调整大小
事件。请注意，如果希望动态插入元素，可以使用
document.createElement（“按钮”）
，然后将其附加到正文中。动态插入元素的问题是，它将继续添加按钮，直到此语句为true
if（window.innerWidth<500）
我只想让它添加一次按钮。@ParasKumar我添加了第三个示例，演示了如何执行此操作。基本上，在插入按钮之前，您需要确定一种检查按钮是否已添加到dom的方法only@ParasKumar更新了我的答案，以显示如何使用
调整大小
事件。请注意，如果希望动态插入元素，可以使用
document.createElement（“按钮”）
，然后将其附加到正文中。动态插入元素的问题是，它将继续添加按钮，直到此语句为true
if（window.innerWidth<500）
我只想让它添加一次按钮。@ParasKumar我添加了第三个示例，演示了如何执行此操作。基本上，在插入按钮之前，需要确定一种检查按钮是否已添加到dom的方法。