使用javascript动态插入文字的样式

我正在研究一个小文本框，它将主动显示不同的文本而不重新加载页面。我使用JavaScript来插入基于用户点击链接的文本段落。它的工作原理，但是，我想也插入样式属性到动态插入的内容。我想这样做，因为div的背景会变黑。使用javascript动态插入文字的样式

这里是我的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"; 
     } 
    }

下面是与它

<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>

最终产品的工作原理而来的HTML。但是，无论何时将新文本插入框中，它都会变黑。然后你无法阅读文本。

这里是一个的jsfiddle http://jsfiddle.net/9xahg/

虽然在拨弄不工作和IM不知道为什么。但无论如何，它在所有浏览器中按预期工作，但不能读取新文本。

我该如何解决这个问题？

来源

2013-03-02 onTheInternet

只需添加“颜色：白色”;在#information CSS语句：

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

而且它的工作;）

来源

2013-03-02 21:48:54 Guicara

哈哈应该想到这是一件显而易见的那样。非常感谢你=） – onTheInternet 2013-03-02 22:34:27

不客气;） – Guicara 2013-03-02 22:35:43

JQuery完全是为了这个，所以你可以引用HTML元素，就像你在CSS中一样。如果你想使用JavaScript设计元素，我强烈建议你使用jQuery。它将长期节省下来的回报。一旦你有它，有一个特定的.css()函数来帮助你。

来源

2013-03-02 21:45:50

尝试添加

color: white;

到#information代替

这是因为我的风格与p元素，你不要当你写新的文本打印出AP元素...

无论是或者你也可以在写文字时加入ap元素：

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

来源

2013-03-02 21:47:19 JohnMalkowich

使用javascript动态插入文字的样式

回答

相关问题