Javascript：特定屏幕尺寸的removeChild

时间：2022-09-20 21:28:42

I'm trying for hours now to add a wrapper around two divs (aside and .related) at a certain screensize (>60em and <90em). I'm doing this with matchMedia and an eventListener. The wrapper seems to be added at the right spot, but the problem is that it's still there even when the condition of the size is not met.

我正在尝试几个小时,在某个屏幕尺寸(> 60em和<90em)处添加两个div(旁边和.related)的包装器。我正在使用matchMedia和eventListener这样做。包装似乎是在正确的位置添加的,但问题是它仍然存在,即使不满足大小的条件。

Here is a jsfiddle: http://jsfiddle.net/Vanilla__/4q26ngmg/1/

这是一个jsfiddle:http://jsfiddle.net/Vanilla__/4q26ngmg/1/

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

  });
}

I wanted to add an 'else' to remove the child (with removeChild) or delete the eventListener (with removeEventListener) when there's another screen size, but all I get is errors about that the function is not definied or other errors whatever I try.

我想添加一个'else'来删除子(使用removeChild)或删除eventListener(使用removeEventListener),当有另一个屏幕大小时,但我得到的是关于函数未定义的错误或其他错误,无论我尝试什么。

else {
       window.removeEventListener("resize", addWrapper(q));
    }

Does anyone know how the wrapper can be removed when the screensize is not >60em and <90em? I'm a Javascript rookie (as might be clear ;) ). Any help is appreciated.

当屏幕尺寸不是> 60em和<90em时,有谁知道如何移除包装器?我是一个Javascript菜鸟(可能很清楚;))。任何帮助表示赞赏。

1 个解决方案

#1

1  

You could do something like this:

你可以这样做:

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>

#1

1  

You could do something like this:

你可以这样做:

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>

标签：

相关文章