Question

每当页面高度大于11.5英寸时，如何添加div？我每次发生时都需要复制相同的div。

<div class="logo-etm">
     <img src="/img/etm-logo.png" class="etm">
</div>

我有这个代码，但它不会像我想要的那样工作：

$( document ).ready( function(){
    var e = $( '.logo-etm' );
    if( $("body").height() > 11.5 ){        
        e.clone().insertAfter( e ); 
    }
});

它将所有div放在另一个...我需要它们在下面。有人可以帮忙吗？这是css：

$('.logo-etm').css('display','block').css('margin-top','-1.5in').css('width','100%');
$('.etm').css('position','fixed').css('z-index','-1').css('width','30%');

Answer 1

你的css不是css是JS所以你必须将它应用到新的克隆节点！
尝试在节点克隆后应用它！

＆＃13;

$(document).ready(function() {
    var e = $('.logo-etm');
    if($("body").height() > 11.5){      
        e.clone().insertAfter(e);   
       
       }
  
  $('button').click(function(){
    // $('.logo-etm').css('display','block').css('margin-top','-1.5in').css('width','100%');
    // $('.etm').css('position','fixed').css('z-index','-1').css('width','30%');
    $('.logo-etm').css({
      'display'    :'block' ,
      'margin-top' :'1100px' ,
      'width'      :'100%'
    });
    $('.etm').css({
      'position'  :'realtive' ,
      'z-index'   :'-1' ,
      'width'     :'30%'
    });
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo-etm">
    <img src="https://openclipart.org/image/100px/svg_to_png/220732/Tribal-Kitten.png&disposition=attachment" alt="Tribal Kitten" title="Tribal Kitten by  GDJ ( https://openclipart.org/user-detail/GDJ )" class="etm"/>
</div>
<button>click to apply css</button>

＆＃13;

Answer 2

11.5 in 不是 jQuery可以使用的单元。 $('body').height()在height()方法的文档中返回基于像素的无单位值，为is stated。请问为什么你选择使用英寸？

将像素换成等效的英寸是一种选择吗？如果是，则正确插入元素，请参阅附带的示例。如果body高度大于500 px，则元素将被克隆并插入第一个元素之后。

为了确保在这种情况下正确返回正文的（视口）高度，我已经提供了html和body代码height: 100%。

$(document).ready(function() {

  // What is the original logo?
  var logo = $('.logo');

  // Where should the duplicated logo go to?
  var target = $('.body');

  // What should the min-height be before inserting the duplicated logo?

  if ($("body").height() > 50) {
    logo.clone().css({
      'position': 'fixed',
      'background': 'red',
      'z-index': '-1',
      'width': '75px',
      'top': '0px',
      'left': '0px',
    }).insertAfter(logo);

    logo.css({
      'margin-top': '1100px',
      'display': 'block'
    });

  }

});

html,
body {
  margin: 0;
  padding: 0;
}
body {
  font: bold 2em sans-serif;
  color: #fff;
  border: 1px solid #000;
}
.logo {
  position: relative;
  background: #7A59A5;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="logo">elem</div>

更新

以下代码将复制并插入var size中定义的每个像素数量的复制徽标

$(document).ready(function() {

  // What is the original logo?
  var logo = $('.logo');
  
  // At what size should a new logo be inserted?
  var size = 1100; 

  if($('body').height() > size) {
    
    for(var i = (size * 2); i < ($('body').height()); i += size) {
      
      logo.clone().css({
        'position': 'absolute',
        'background': 'red',
        'z-index': '-1',
        'width': '100px',
        'top': i + 'px'
      }).insertAfter(logo);
      
    }

    logo.css({
      'margin-top': '1100px',
      'display': 'block'
    });

  }

});

html,
body {
  margin: 0;
  padding: 0;
}
body {
  font: bold 2em sans-serif;
  color: #fff;
  height: 6000px;
}
.logo {
  position: relative;
  background: #7A59A5;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="logo">logo</div>

每当高度大于11.5英寸时添加div

2 个答案:

更新