加载HTML元素

javascript media query - loading HTML elements

本文关键字：元素 HTML 加载      更新时间：2023-09-26

我想要一个HTML元素(<p>HTML element</p>)加载在页面上只有当屏幕的大小是一定的宽度以上。

我不想让它隐藏;我希望它在屏幕尺寸小于600时被完全删除，在屏幕尺寸大于600时加载。

我试着

if (window.matchMedia('screen and (min-width: 600px)')){
   $('body').append('<p>HTML element</p>');
}

但它不适合我。有线索吗?

window.matchMedia()返回一个对象，您需要检查matches属性:

if (window.matchMedia('screen and (min-width: 600px)').matches){...}

为什么这些媒体查询?$(document).width()将是一个解决方案。

if($(document).width()>600){
    $('body').append('<p>HTML element</p>');
}

if ( document.body.clientWidth > 600 )
{
  "add element"
}
else
{
  "Remove element"
}
相关文章：