如何使用 jQuery 或 JavaScript 设置底边距

Question

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

我已经试过了

#Selection { margin-bottom:23px; }

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

JsFiddle

片段如下：-

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;
});

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;
}

<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>

Answer 1

您的意思是您不希望背景图片被<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">下，这取决于你想看到什么效果。

Answer 2

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

用这个用底部的demo来说明：

<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 和 Vanilla JS 应用边距

如果您想使用 jQuery 应用 margin-bottom，您可以将其添加到您的脚本文件中，请注意，我将其标识符从 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 3

这个黑客怎么样：

#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) 上方。