如何使用jQuery或JavaScript降低利润率

Question

如何为我的选择框添加下边距？

我已经尝试了

#Selection { margin-bottom:23px; }

但这对我不起作用。有没有办法用JavaScript或jQuery做到这一点。

JsFiddle

以下片段： -

＆＃13;

＆＃13;

var startX = 0,
  startY = 0,
  started = false;

$(document).mousedown(function(e) {
  e.preventDefault();

  startX = e.pageX;
  startY = e.pageY;
  started = true;
  $('#selection').css({
    'top': startY,
    'left': startX
  });
});

$(document).mousemove(function(e) {
  if (started) {

    $('#selection').css({
      'left': startX > e.pageX ? e.pageX : startX,
      'top': startY > e.pageY ? e.pageY : startY
    });

    $('#selection').css({
      'height': Math.abs(e.pageY - startY),
      'width': Math.abs(e.pageX - startX)
    });
  }
});

$(document).mouseup(function() {
  $('#selection').css({
    'top': 0,
    'left': 0,
    'height': 0,
    'width': 0
  });
  started = false;
  startX = 0;
  startY = 0;
});

$(document).on('contextmenu', function() {
  return false;
});

＆＃13;

body {
  background:url(http://www.soyos.net/tl_files/demos/Windows-7-UI-and-Windows-Aero-for-Websites/win7-desktop-bg.jpg) no-repeat bottom center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin:0;
}
#container {
  position: absolute;
  width:100%;
  height:90%;
  top:0px;
}
#selection {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.25);
  -webkit-box-shadow:inset 0px 0px 0px 2px #f00;
  -moz-box-shadow:inset 0px 0px 0px 2px #f00;
  -ms-box-shadow:inset 0px 0px 0px 2px #f00;
  -o-box-shadow:inset 0px 0px 0px 2px #f00;
  box-shadow:inset 0px 0px 0px 2px #f00;
}
#bottom {
  position:fixed;
  background-color: rgba(255, 0, 0, 0.5);
  width:100%;
  height:10%;
  text-align:center;
  bottom:0;
}

＆＃13;

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

<div id="container">
  <div id="selection"></div>
</div>

<div id="bottom">
  <font size="+3" color="lime">don't want selection box here!</font>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

#selection没有给你一个margin-bottom，因为它是绝对定位的，下面也没有其他元素可以让它有一个底边。

使用它来演示底部的演示：

<div id="container">
   <div id="selection">Hello</div>
   <div id="selection">Hello</div>
   <div id="selection">Hello</div>
</div>

CSS：

#selection {
  background-color: rgba(0, 0, 0, 0.25);
  -webkit-box-shadow:inset 0px 0px 0px 2px #f00;
  -moz-box-shadow:inset 0px 0px 0px 2px #f00;
  -ms-box-shadow:inset 0px 0px 0px 2px #f00;
  -o-box-shadow:inset 0px 0px 0px 2px #f00;
  box-shadow:inset 0px 0px 0px 2px #f00;
  margin-bottom: 20px;
}

将边距应用于JQuery＆amp;香草JS

如果您想将margin-bottom应用于jQuery，可以将其添加到脚本文件中，请注意我已将其标识符从ID更改为类到目标倍数。

$(".selection").css("margin-bottom", "25px");

以上是上面提到的纯JavaScript（我使用了ID）：

document.getElementById("selection").style.marginBottom = "25px";

隐藏底部元素

要删除#bottom元素，您只需将底部距离增加到-100px，因为您使用position:absolute来隐藏它。假设您要显示它，然后可以将其绑定到mouseover等事件。

这是一个演示：

CSS：

#bottom {
  position:fixed;
  background-color: rgba(255, 0, 0, 0.5);
  width:100%;
  height:10%;
  text-align:center;
  bottom:-100px;
}

JS：

$("#container").mouseover(function(){
    $("#bottom").animate({bottom: "0px"});
});

$("#container").mouseleave(function(){
    $("#bottom").animate({bottom: "-100px"});
});

CODEPEN DEMO

Answer 2

这个黑客怎么样：

#container {
    position: absolute;
    width:100%;
    height:100%;
    top:0px;

    -moz-transform: scale(1,0.90);
    -moz-transform-origin: 0 0;
    -o-transform: scale(1,0.90);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(1,0.90);
    -webkit-transform-origin: 0 0;
    transform: scale(1,0.90);
    transform-origin: 0 0;
}

http://jsfiddle.net/c2rvorgy/

或者这个黑客：

#container {
    position: absolute;
    width: 100%;
    height: 90%;
    top: 0px;
    overflow: hidden;
}

http://jsfiddle.net/c2rvorgy/1/
虽然使用此解决方案，#Selection仍然可以拖动到文档的最底部，但它可以避免它超出底栏（#bottom）。

Answer 3

你的意思是你不希望<div id="botton">覆盖背景图片吗？

如果答案是肯定的，那么您只需移动background:url(http://www.soyos.net/tl_files/demos/Windows-7-UI-and-Windows-Aero-for-Websites/win7-desktop-bg.jpg) no-repeat bottom center fixed;

从body到#selection：

    #selection {
//move the picture here
         background:url(http://www.soyos.net/tl_files/demos/Windows-7-UI-and-Windows-Aero-for-Websites/win7-desktop-bg.jpg) no-repeat;
    //give the picture width and height otherwise you cant see the picture 
    //on the page because this <div> was 0px by 0px;
        width:100%;   
        height:100%;

      position: absolute;
      background-color: rgba(0, 0, 0, 0.25);
      -webkit-box-shadow:inset 0px 0px 0px 2px #f00;
      -moz-box-shadow:inset 0px 0px 0px 2px #f00;
      -ms-box-shadow:inset 0px 0px 0px 2px #f00;
      -o-box-shadow:inset 0px 0px 0px 2px #f00;
      box-shadow:inset 0px 0px 0px 2px #f00;
    }

您调整#selection的原因不起作用是因为背景图片附在整个页面上。您必须将该图片嵌套在<div id="container">或<div id="selection">下，具体取决于您希望看到的效果。