如何在Javascript中添加忽略父元素左边距和填充的子元素

How to add a child element that ignores the left marging and padding of the parent in Javascript

本文关键字：元素 左边 填充 Javascript 添加      更新时间：2023-09-26

请看一下这个jsfiddle:

http://jsfiddle.net/dd4g4re5/

这是代码：

HTML

<div class="a"></div>

CSS

div{
    width: 200px;
    height: 200px;
    background: red;
}
.a {
    padding-left: 6px;
}
.b {
    position: relative;
    background: blue;
}

JAVASCRIPT

var divA = document.getElementsByTagName("div")[0];
var divB = document.createElement("div");
divB.className="b";
divA.appendChild(divB);

我想将子div定位在容器div，因此它与父级完全重叠。但正如你所看到的，这是不可能的，因为父项的左侧填充。

我想我可以做这样的事情：

divB.style.left = -(divA.leftPadding + divA.leftMargin)+"px";

但我希望有一种更好的方法可以做到这一点，比如Javascript中的一些原生函数，所以我不希望必须进行那种计算。

此外，我希望避免给孩子设置一个绝对的位置。

在此处使用边框可以确保它们都符合所需的宽度。您需要给子元素一个负的左边距，该值与其父元素的左填充值相同。

var divA = document.getElementsByTagName("div")[0];
var divB = document.createElement("div");
divB.className="b";
divA.appendChild(divB);
div{
    width: 200px;
    height: 200px;
    background: red;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.a {
    padding-left: 6px;
}
.b {
    position: relative;
    background: blue;
    margin-left: -6px;
}
<div class="a"></div>

您可以将子对象完全定位在（相对）父对象中，如下所示：

.parent {
    position: relative;
    padding: 10px;
}
.child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

http://jsfiddle.net/bvaughn/ouxsdmfc/

相关文章：