Question

学习JavaScript，这是我的第一个真正的项目＆＃39;＆＃39;

我创建了一个循环来检查.background元素是否小于客户端，如果是，则添加切片节点，直到.background元素与客户端的高度相同。

问题是添加的切片节点太多，有时会导致浏览器崩溃。

此外，有没有办法克隆HTML节点并重复它而不是使用：

background.innerHTML += '<span class=slice></span>';

如果有更好的方式做我想做的事情，请告诉我！

的jsfiddle

http://jsfiddle.net/8ryAD/11/

HTML

<div class="master">

    <a id="btn-nav">
        <span></span>
        <span>Menu</span>
        <span></span>
    </a>

    <nav id="main-nav">

            <div class="background">

                <div class="slice"></div>


            </div>

    </nav>

</div><!-- end master -->

JS

(function () {
    'use strict';

    var w = document.documentElement.clientHeight;
    var menuBtn = document.getElementById('btn-nav');
    var slice = document.querySelectorAll('.slice');
    var background = document.getElementsByClassName('background')[0];

    //var mainNavHeight = document.getElementById('main-nav').clientHeight;
    //var slideAdd = slice.cloneNode(true);
    //var windowHeight = window.innerHeight;


    menuBtn.addEventListener('click', function() {

        menuBtn.classList.add('open');

            for(var i = background.clientHeight; i < w; i++) {      
                background.innerHTML += '<span class=slice></span>';

                            //for(var i = 0; i < slice.length; i++){
                //  slice[i].style.opacity = 1;
                // }
            }

    }, false);

}());

Answer 1

完成它。如果有人知道更好的方法，请告诉我！感谢。

var slice = document.querySelectorAll('.slice');
var menuBtn = document.getElementById('btn-nav');
var b = document.getElementsByClassName('background')[0];
var a = document.getElementById('main-nav').clientHeight

menuBtn.addEventListener('click', function() {

    menuBtn.classList.add('open');

        for(var i = b.clientHeight; i < a; i++) {   

          if(b.clientHeight == a) {

            break;
          } else {
            b.innerHTML += '<span class=slice></span>';
          }
        }

}, false);

克隆元素并重复，直到填充视口

1 个答案: