使用javascript動態插入帶樣式的文本

Question

我正在處理一個小的文本框，它將主動顯示不同的文本而不重新加載頁面。 我使用javascript根據用戶點擊的鏈接插入文本段落。 但是，我還希望將樣式屬性插入到動態插入的內容中。 我想這樣做是因為div的背景是黑色的。

這是我的JS

    function navClicked(x){

        //alert("function activated");
        //alert(x);
        if (x == "aboutButton"){
            //alert("About Button");
            document.getElementById('information').innerHTML = "About Click";
        }
        else if(x == "faqButton"){
            //alert("FAQ Button");
            document.getElementById('information').innerHTML = "FAQ Click";
        }
        else if(x == "servicesButton"){
            //alert("Services Button");
            document.getElementById('information').innerHTML = "Services Click";
        }
        else{
            //alert("Contact Button");
            document.getElementById('information').innerHTML = "Contact Click";
        }
    }

這是隨之而來的html

<body>
        <div id="navigation">
            <table cellpadding="5">
                <tr>
                    <td>
                        <a onClick="navClicked('aboutButton');" style="cursor: pointer; cursor: hand;">ABOUT ATS</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a onClick="navClicked('faqButton');" style="cursor: pointer; cursor: hand;">FAQ</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a onClick="navClicked('servicesButton');" style="cursor: pointer; cursor: hand;">SERVICES</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a onClick="navClicked('contactButton');" style="cursor: pointer; cursor: hand;">CONTACT</a>
                    </td>
                </tr>               
            </table>
        </div>
        <div id="information">
            <p>
                content
            </p>
        </div>
    </body>

最后是CSS

<style>
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
    p
    {
    color:white;
    }

    #navigation
    {   
        height:145px;
        float:left;
        width:155px;
        background:grey;
    }
    #navigation table
    {
        margin-left:auto;
        margin-right:auto;
        color:white;
    }

    #information
    {
        height:145px;
        float:left;
        width:290px;
        background:black;
    }
</style>

最終產品有效。 但是，每當新文本插入到框中時，它就會變黑。 然后你無法閱讀文字。

這是一個jsFiddle http://jsfiddle.net/9xahg/

雖然它在小提琴中不起作用，我不知道為什么。 但無論如何，除了您無法閱讀新文本外，它在所有瀏覽器中都能正常工作。

我怎樣才能解決這個問題？

Answer 1

嘗試添加

color: white;

改為#information

這是因為我用它設置了p元素並且你在寫新文本時不打印出ap元素...

或者你也可以在寫文字時加上ap元素：

document.getElementById('information').innerHTML = "<p>About Click</p>";

Answer 2

只需添加“顏色：白色;” 在#information CSS語句中：

#information
{
    height:145px;
    float:left;
    width:290px;
    background:black;
    color: white;
}

這是工作;）

Answer 3

JQuery完全是為了這個，所以你可以像在CSS中一樣引用HTML元素。 如果你想使用JavaScript設置元素樣式，我強烈建議你使用jQuery。 從長遠來看，它會節省成本。 一旦你擁有它，有一個特定的.css()函數來幫助你。

使用javascript動態插入帶樣式的文本

問題描述

3 個解決方案

解決方案1
1 2013-03-02 21:47:19

解決方案2
1 已采納 2013-03-02 21:48:54

解決方案3
0 2013-03-02 21:45:50

使用javascript動態插入帶樣式的文本

問題描述

3 個解決方案

解決方案1 1 2013-03-02 21:47:19

解決方案2 1 已采納 2013-03-02 21:48:54

解決方案3 0 2013-03-02 21:45:50

解決方案1
1 2013-03-02 21:47:19

解決方案2
1 已采納 2013-03-02 21:48:54

解決方案3
0 2013-03-02 21:45:50