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

Posted 2023-03-06

【中文标题】如何使用 jQuery 或 JavaScript 设置底边距

【英文标题】：How to bottom margin with jQuery or JavaScript

【发布时间】：2016-02-10 15:05:03

【问题描述】：

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

我已经试过了

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

【问题讨论】：

你想选择框在哪里？

@DinoMyte 我想把它放在 里面。

【参考方案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">下，这取决于你想看到什么效果。

【参考方案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

【讨论】：

不要使用 css，因为我不想添加一些 javascript 或 jQuery 来添加底部边距

我更新了我的笔，看看JS文件的底部，看看如何用jQuery应用边距。

我添加了 jQuery 和 vanilla JS 方法来应用这种样式。

如果你只是想隐藏它，你可以给它一个不透明度0。

【参考方案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) 上方。

【讨论】：

请添加第二个hack sn-p。

这是我添加到答案中的第二个代码，它下面的链接是它的 jsFiddle 示例。 jsfiddle.net/c2rvorgy/1