如何使用 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 因为它是绝对定位的，而且它下面没有其他元素让它有边距底部。

使用这个来说明底部的演示：

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

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

$(".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

这个 hack 怎么样：

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

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

How to bottom margin with jQuery or JavaScript

html

javascript

css

jquery

margin

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

JsFiddle

下面的片段：-

这个 hack 怎么样：

或者这个技巧：