Question

我正在尝试使用JavaScript来更新CSS布局，因为网页加载了。我的代码看起来像这样：

var container = 0; // Add Total UI
var containerTitle = 0; // Container Title

var article = 0; 
var articleTitle = 0;

var divName = 0; // temp variable for article id names
var divNameT = 0; // temp variable for title id names

function setLayout(id) {
    container = document.getElementById(id);

    for(var x = 0; x < 18; ++x) {
        // CREATE CONTAINER FOR ALL PANELS
        divName = "articleCon"+ x;
        article = document.createElement('div');
        article.id = divName;
        // SETUP CSS STYLE
        article.style.cssText = 'height: 205px; width: 300px; background: red; margin-right: 20px; margin-bottom: 20px; display: block; float: left;';

        setNewsTitle(count,divName); // Function Call to set Title Panel

        container.appendChild(article);
    }
}

function setNewsTitle(count,id) {
    containerTitle = document.getElementById(id);
    // CREATE CONTAINER FOR TITLE
    divNameT = "articleTitle"+ count;
    articleTitle = document.createElement('div');
    articleTitle.id = divNameT;
    // SETUP CSS STYLE
    articleTitle.style.cssText = 'position: absolute; height: 45px; width: 100px; background: yellow; display: inline;';

    containerTitle.appendChild(articleTitle);
}

当我编译我的代码而没有调用函数setNewsTitle（count，id）时，所有CSS元素都正常工作。我在这里遇到的问题是每当进行函数调用时，我的页面显示为空白。屏幕上没有显示任何内容。

我尝试添加屏幕截图以便更好地理解，但我还没有声誉。

Answer 1

尝试......

    container.appendChild(article);
    setNewsTitle(x,divName); // Function Call to set Title Panel

在setNewsTitle运行之前，文章需要到位，因为您正在按ID查找元素。此外，您还没有count，还有x ...

jsFiddle：http://jsfiddle.net/rfornal/o1wyae74/

Answer 2

试试这个，在调用函数set sTitle之前在DOM中追加child，用x代替count：

var container = 0; // Add Total UI
var containerTitle = 0; // Container Title

var article = 0; 
var articleTitle = 0;

var divName = 0; // temp variable for article id names
var divNameT = 0; // temp variable for title id names

function setLayout(id) {
    container = document.getElementById(id);

    for(var x = 0; x < 18; ++x) {
        // CREATE CONTAINER FOR ALL PANELS
        divName = "articleCon"+ x;
        article = document.createElement('div');
        article.id = divName;
        // SETUP CSS STYLE
        article.style.cssText = 'height: 205px; width: 300px; background: red; margin-right: 20px; margin-bottom: 20px; display: block; float: left;';

        container.appendChild(article);

        setNewsTitle(x,divName); // Function Call to set Title Panel

    }
}

function setNewsTitle(count,id) {
    containerTitle = document.getElementById(id);
    // CREATE CONTAINER FOR TITLE
    divNameT = "articleTitle"+ count;
    articleTitle = document.createElement('div');
    articleTitle.id = divNameT;
    // SETUP CSS STYLE
    articleTitle.style.cssText = 'position: absolute; height: 45px; width: 100px; background: yellow; display: inline;';

    containerTitle.appendChild(articleTitle);
}

Answer 3

您的代码中有2个问题：

您尚未将该元素添加到DOM中，因此当您在函数document.getElementById中尝试setNewsTitle()时 - 它将找不到任何内容。
您对setNewsTitle(count,id)的方法调用中出错。您正在传递“计数”，但计数不存在。您需要将其称为setNewsTitle(x, divName)，但只有在您拨打container.appendChild(article)之后才会将其称为。</ p>

setLayout函数最终会是这样的：

function setLayout(id) {
    container = document.getElementById(id);

    for(var x = 0; x < 18; ++x) {
        // CREATE CONTAINER FOR ALL PANELS
        divName = "articleCon"+ x;
        article = document.createElement('div');
        article.id = divName;
        // SETUP CSS STYLE
        article.style.cssText = 'height: 205px; width: 300px; background: red; margin-right: 20px; margin-bottom: 20px; display: block; float: left;';

        // Add it to the DOM first
        container.appendChild(article);
        // need to pass "X", not count
        setNewsTitle(x,divName); // Function Call to set Title Panel
    }
}

使用JavaScript创建和追加嵌套的div元素

3 个答案: