使用 javascript 为具有类名的 div 设置填充答案

【问题标题】：Set padding for a div with class name use javascript使用 javascript 为具有类名的 div 设置填充
【发布时间】：2016-02-08 06:53:31
【问题描述】：

我使用这个 javascript 代码：

<script>
    $(window).load(function () {
        $(".container").delay(2000).fadeIn(500);
        var myElement = document.querySelector("#bl-main > section");
        myElement.style.bottom = "300px";
    });
</script>

成功了。
但是我编辑了这段代码（用于设置 div/section = header picture + headermenu 的底部位置）：

<script>
    $(window).load(function () {
        //document.getElementById("bl-main").style.bottom = "300px";
        var headerroot = document.getElementById('headerroot').style.height;
        var headMenu = document.getElementById('headMenu').style.height;
        var tru = headerroot + headMenu + "px";
        $(".container").delay(2000).fadeIn(500);
        var myElement = document.querySelector("#bl-main > section");
        myElement.style.bottom = tru;
    });
</script>

出了点问题，代码不起作用@_@
我的代码有什么问题？
谢谢。

【问题讨论】：

如果你用的是jQuery，为什么你还在用javascript函数呢？ document.getElementById("a") -> $("#a") ?
style.height 将返回内联 CSS 高度（如果有）！
@TreeNguyen，是这个问题吗？这似乎与问题无关..
你能分享你的 HTML 或 Fiddle 吗？
@RayonDabre 是的，我知道。只是想在检查错误之前跟他提一下:)

标签： javascript css padding var

【解决方案1】：

style.height 将返回与px 关联的值，这是字符串，因此+ 将连接它们而不是addition

function changePosition() {
	var headerroot = document.getElementById('headerroot').style.height;
	var headMenu = document.getElementById('headMenu').style.height;
	var tru = parseInt(headerroot) + parseInt(headMenu) + 'px';
	var myElement = document.querySelector("#test");
	myElement.style.bottom = tru;
}

<div id="headerroot" style="height: 50px"></div>
<div id="headMenu" style="height: 100px"></div>
<button type="button" onclick="changePosition()">Change</button>
<div id="test" style="background: green;position: absolute">Test Data</div>

【讨论】：

我可以看到它有效，但是当我应用到我的代码时。这行不通。我认为这段代码有两个问题。 1/ 我想将此应用于 bl-main div 中的所有部分。当我选择一个类而不是一个 ID 时，querySelector 可以工作吗？ 2/ getElementID.style.height 仅在该组件设置为高度时才有效？问题是headerroot和headMenu没有固定高度T_T（如果是固定高度，我会给css代码设置padding，不需要js T_T）
这个问题并不期望您在评论中陈述什么。请发布另一个问题，以便您找到合适的解决方案！

【解决方案2】：

起初我对您要做什么感到困惑。所以我会在这里留下2个想法，以防你需要它们中的任何一个

如果您打算应用新样式，例如：padding {0px 0px 10px 10px}，那么它应该如下所示

var tru = headerroot + "px " + headMenu + "px"; //get the number and put the "px" word after the number

如果您想为新样式添加 2 个数字，请先尝试这样做：

var tru = headerroot + headMenu; //this will do the addition
tru = tru + "px"; //this will concat with px -> new style

原因是：javascript 对类型并不严格，所以基本上可以相互添加任何内容。所以当你做headerroot + headMenu + "px"时，它认为你是在尝试创建一个新字符串，而不是添加数字并将"px放在最后。

【讨论】：

这将做字符串concatenation而不是添加！
@RayonDabre 是的。这就是我的意思。最后它应该看起来像“12px 12px”。这就是要应用的新样式
他正在申请myElement.style.bottom..你确定你在说什么吗？
@RayonDabre 嗨。我刚刚发现我弄错了一点:)。刚刚编辑过:)
OP 已经这样做了：var tru = headerroot + headMenu + "px";

【解决方案3】：

您可以尝试.clientHeight 或.offsetHeight 而不是.style.height

var headerroot = document.getElementById('headerroot').clientHeight;
        var headMenu = document.getElementById('headMenu').clientHeight;

offsetHeight 属性类似于clientHeight 属性，但它返回的高度包括内边距、滚动条和边框。

【讨论】：