logo标签列表

JavaScript：在特定屏幕尺寸下删除子元素

javascripthtmlevent-listenermatchmedia
3
我已经尝试了几个小时，想在特定屏幕尺寸(>60em and <90em)下添加两个div(aside和.related)的包装器。我使用matchMedia和eventListener来实现这一点。包装器似乎添加到了正确的位置，但问题是即使未满足大小条件，它仍然存在。
这里是一个jsfiddle链接：http://jsfiddle.net/Vanilla__/4q26ngmg/1/ 简化后的HTML代码：
<body>
  <header>Header</header>
  <main>Main</main>
  <aside>Aside</aside>
  <div class="related">Related</div>
  <footer>Footer</footer>
</body>

JavaScript：

if(window.matchMedia("screen and (min-width: 60em) and (max-width: 90em)").matches) {

  window.addEventListener("resize", function addWrapper(q) {

  //Create div with id wrapper
  var div = document.createElement('div');
  div.id = "wrapper";

  // Select aside
  var selectDiv = document.querySelector("aside");

  //clone
  div.appendChild(selectDiv.cloneNode(true));
  //Place the new wrapper at the right place in the HTML
   selectDiv.parentNode.replaceChild(div, selectDiv);

  //Add related to the wrapper so they're both in the wrapper
  document.querySelector('#wrapper').appendChild(
    document.querySelector('.related') );

  });
}

我希望添加一个“否则”语句，以便在出现其他屏幕尺寸时删除子元素（使用removeChild）或删除事件侦听器（使用removeEventListener），但是无论我尝试什么，都会收到有关函数未定义或其他错误的错误信息。请保留HTML标签。
else {
       window.removeEventListener("resize", addWrapper(q));
    }

有人知道如何在屏幕尺寸不大于60em且不小于90em时去除包装器吗？我是JavaScript新手（显然可能会清楚 ;)）。任何帮助都将不胜感激。

2
我宁愿使用媒体查询来在某些分辨率下隐藏/显示元素。 - Tushar
问题在于我无法编辑HTML，因此必须动态添加包装器。 - Vanilla__
1个回答
1
你可以这样做：

var addWrapper = function () {

    //Don't add wrapper if already added
    var wrapper = document.getElementById("wrapper");
    if (wrapper !== null) return;

    //Create div with id wrapper
    var div = document.createElement('div');
    div.id = "wrapper";

    // Select aside
    var selectDiv = document.querySelector("aside");

    //clone
    div.appendChild(selectDiv.cloneNode(true));
    //Place the new wrapper at the right place in the HTML
    selectDiv.parentNode.replaceChild(div, selectDiv);

    //Add related to the wrapper so they're both in the wrapper
    document.querySelector('#wrapper').appendChild(
    document.querySelector('.related'));
};

var removeWrapper = function () {
    //Don't remove if there is no wrapper
    var wrapper = document.getElementById("wrapper");
    if (wrapper === null) return;

    //Replace wrapper with its content
    wrapper.outerHTML = wrapper.innerHTML;
}

var wrapperFixer = function () {
    if (window.matchMedia("screen and (min-width: 60em) and (max-width: 90em)").matches) {
        addWrapper();
    } else {
        removeWrapper();
    }
}

window.onload = function () {
    window.addEventListener("resize", wrapperFixer);
    //Check and add if wrapper should be added on load
    wrapperFixer();
}
body {
    display: flex;
    height: 40em;
    flex-wrap: wrap;
    font-family: Helvetica, Arial, sans-serif;
    color: white;
    text-align: center;
}
header {
    background-color: purple;
    width: 30%
}
main {
    background-color: pink;
    width: 40%
}
aside {
    background-color: deepPink;
    width: 15%
}
.related {
    background-color: red;
    width: 15%
}
footer {
    background-color: slateBlue;
    width: 100%;
    height: 5em;
}
#wrapper {
    border: 4px solid white;
}
<body>
    <header>Header</header>
    <main>Main</main>
    <aside>Aside</aside>
    <div class="related">Related</div>
    <footer>Footer</footer>
</body>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接