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元素，并且当你写新文本时你不打印p元素......

或者你也可以在写文本时加入p元素：

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 个答案: