小编Fen*_*ixp的帖子

我们在JavaScript中遇到了一个相当可怕的问题,我们似乎都没有能力解决:

我们如何获得DOM元素的宽度和高度,包括子元素,整个盒子模型等,而不会在页面上显示组件？

记住:我正在寻找建议.即使没有完全回答问题(或者不完全符合指定参数)的答案也可能,而且可能会有所帮助.

主要目标:我通过Javascript将HTML元素添加到页面中 - 来自数据库的大小和样式的HTML元素.问题是他们行为不端,通常是不好的对齐,由于填充/边距,一个元素比另一个元素大,所以我需要检查它们的实际大小来解决这些问题.

由此产生的应用程序将成为一个,正如BigMacAttack在评论中所描述的那样,"紧密结合的第三方HTML控件拼接"几乎可以在现场进行.它需要看起来像完全成熟的桌面应用程序,HTML似乎充满激情地讨厌这个想法.不是我责备它.

无论如何,这是一些示例代码:

JavaScript的:

function exampleElement(caption, content) {
    this.caption = caption;
    this.content = content;
    this.rootElement = document.createElement("div");
}

exampleElement.prototype.constructElement = function() {
    var otherElement = document.createElement("p");
    this.rootElement.className = "exampleElement";
    this.rootElement.textContent = this.caption; 
    otherElement.className = "exampleP";
    otherElement.textContent = this.content;
    this.rootElement.appendChild(otherElement);
    /*I need to know size of the otherElement here*/
    /*here goes code adding stuff into rootElement*/
};

window.onload = function() {
    var ex = new exampleElement("Hello", "Here's text");
    ex.constructElement();
    document.body.appendChild(ex.rootElement);
};

CSS:

.exampleElement {
    padding: 5px; …

我一直想知道,没有任何具体的上下文这个问题,有没有理由不在JavaScript中使用严格模式？我几乎没有在JS中没有它工作,并且从我在这个主题上所做的所有阅读看起来纯粹有益,因为不受支持的浏览器只是忽略该语句,但如果是这样的话,为什么浏览器总是不使用严格模式首先？

JSLint坚持认为使用.call有问题:

function GridView(tableArray, tableId, multiselect) {
    "use strict";
    if (multiselect == undefined) {
        this.multiselect = false;
    } else {
        this.multiselect = multiselect;
    }

    this.tableID = tableId;
    this.propertiesArr = [];
    this.tableHTML = undefined;
    this.oTable = undefined;

    this._constructTable.call(this, tableArray);

}

是错的.好吧,无论如何,意外.我只是不能为我的生活弄清楚为什么,代码有什么问题吗？它似乎工作,但我担心意外的行为.