Question

好的，我知道你必须使用removeChild（）方法，但是如何以及在哪里？因此，我尝试制作一个脚本，告诉我窗口大小的宽度和高度，以便更容易在CSS中进行媒体查询。好吧，我知道如何通过网站来做这个网站，但我想制作这个脚本，它可以应用于所有网站，这是为什么我必须有appendChild。一切都按照我想要的方式工作，但如果你在firebug工具中看到它，它会不断添加。

查看代码的唯一操作是添加onresize =＆＃34; getWinSize（）＆＃34 ;;对身体。

此外，如果有更好的方式来写这个让我知道（：请不要jQuery。

  <body onresize="getWinSize()";>

这是代码。

function getWinSize () {
    var newDiv = document.createElement('div');
    newDiv.id = "windowSizeOutput";
    document.body.appendChild(newDiv);

    var wd = window.innerWidth;
    var ht = window.innerHeight;
    var display = document.getElementById("windowSizeOutput");

    display.style.background = "white";
    display.style.height = "45px";
    display.style.width = "100px";
    display.style.border = "2px solid black";
    display.style.position = "fixed";
    display.style.left = "10px";
    display.style.top = "200px";

    display.innerHTML = "Width: " + wd + "px" + " Height: " + ht + "px";
}

Answer 1

在getWinSize（）函数中，您始终可以检查元素是否存在，然后将其删除（如果已存在）。像这样：

function getWinSize () {
    var element = document.getElementById("windowSizeOutput");
    if(element)
       element.parentNode.removeChild(element);
    var newDiv = document.createElement('div');
    newDiv.id = "windowSizeOutput";
    document.body.appendChild(newDiv);

    var wd = window.innerWidth;
    var ht = window.innerHeight;
    var display = document.getElementById("windowSizeOutput");

    display.style.background = "white";
    display.style.height = "45px";
    display.style.width = "100px";
    display.style.border = "2px solid black";
    display.style.position = "fixed";
    display.style.left = "10px";
    display.style.top = "200px";

    display.innerHTML = "Width: " + wd + "px" + " Height: " + ht + "px";
}

Answer 2

您不一定每次都需要删除该元素，您只需更新其内容

即可

通过检查文件中是否已有文件：

function getWinSize() {
    var display = document.getElementById("windowSizeOutput");
    if (!display) {
        display = document.createElement('div');
        display.id = "windowSizeOutput";
        document.body.appendChild(display);

        var wd = window.innerWidth;
        var ht = window.innerHeight;

        display.style.background = "white";
        display.style.height = "45px";
        display.style.width = "100px";
        display.style.border = "2px solid black";
        display.style.position = "fixed";
        display.style.left = "10px";
        display.style.top = "200px";
    }

    display.innerHTML = "Width: " + wd + "px" + " Height: " + ht + "px";
}

或者通过将节点保存在函数范围之外

var display = null;
function getWinSize() {
    if (!display) {
        display = document.createElement('div');
        display.id = "windowSizeOutput";
        document.body.appendChild(display);

        var wd = window.innerWidth;
        var ht = window.innerHeight;

        display.style.background = "white";
        display.style.height = "45px";
        display.style.width = "100px";
        display.style.border = "2px solid black";
        display.style.position = "fixed";
        display.style.left = "10px";
        display.style.top = "200px";
    }

    display.innerHTML = "Width: " + wd + "px" + " Height: " + ht + "px";
}

（为了清楚起见，你最终可以将初始化代码放在另一个函数中）

你如何阻止Child Element多次追加？

2 个答案: