动态HTML页面不使用css

我试图动态设置弹出窗口的内容。动态HTML页面不使用css

这里是第一个HTML页面的一切是静态定义：

<html> 
    <head> 
     <meta charset='utf-8'> 
     <link href='css/font-awesome.css' rel='stylesheet'> 
     <link href='css/myStyle.css' rel='stylesheet'> 
    </head> 

    <body> 
     <div id="data"> 
      <ul class='links-list'> 
       <li><a target='_blank' href='siteURL'><i class='myButton'>TEXT</i></a></li> 
       <li><a target='_blank' href='twitterURL'><i class='myButton'>TEXT</i></a></li> 
      </ul> 
     </div> 
    </body> 
</html>

现在我需要动态设置我的按钮，所以我删除将被动态创建的一切：

<html> 
    <head> 
     <meta charset='utf-8'> 
     <link href='css/font-awesome.css' rel='stylesheet'> 
     <link href='css/myStyle.css' rel='stylesheet'> 
    </head> 

    <body> 
     <div id="data"> 
     </div> 

     <script type="text/javascript" src="script.js"> 
     </script> 
    </body> 
</html>

我的内容脚本“script.js”接收数据（链接数组）并且必须在我的HTML文档中创建按钮：

self.port.on("liste", function(list) 
{ 
    var div = document.getElementById('data'); // Get <div id="data"> 
    var ul = document.createElement('ul'); // Create <ul class='links-list'> 
    ul.class = 'links-list'; 

    for (var i = 0; i < list.links.length; ++i) 
    { 
     var site = list.links[i]; 
     var li = document.createElement('li'); // Create <li> 
     var link = document.createElement('a'); // Create <a> 
     var button = document.createElement('i'); // Create <i> 

     button.class = "myButton"; 

     link.text = site.text; 
     link.href = site.url; 
     link.target = '_blank'; 

     link.appendChild(button); 
     li.appendChild(link); 
     ul.appendChild(li); 
    } 

    div.appendChild(ul); 
});

问题是动态创建的链接没有使用 “myStyle.css”，这里是一个comparaison：

静态VS动态负载：

谁能帮我解决这个？谢谢。

来源

2016-03-08 Nucktrooper

你的CSS文件在非动态页面中工作吗？你可以发布吗？ – Smartis

弹出窗口是一个mozilla附加组件。我通过更改属性“innerHTML”动态加载内容，并且我的css文件运行良好，但mozilla不喜欢它，并要求我不要使用“innerHTML”。我只是在改变我动态改变内容的方式。此外，在问题的最后，你有一个在非动态页面上工作的例子。 – Nucktrooper

调试器告诉我'未捕获的ReferenceError：列表未定义'在'Script.js第5行' – Smartis

使用javascript提供项目class的正确方法是 - 不够直观 - className或setAttribute。因此，无论这些都将添加正确的类：

button.className = 'myButton' 
button.setAttribute('class', 'myButton')

只需使用.class确实在Javascript中没有工作：

document.getElementById('a1').class = 'aClass'; 
 
document.getElementById('a2').className = 'aClass'; 
 
document.getElementById('a3').setAttribute('class', 'aClass');

.aClass { color: red; }

<pre id="a1">.class</pre> 
 
<pre id="a2">.className</pre> 
 
<pre id="a3">.setAttribute</pre>

来源

2016-03-08 17:11:40 somethinghere

我看来像评论从CBroe是答案。在您的JavaScript中，您将文本放入链接而不是按钮。这意味着该按钮基本上是不可见的。这就是为什么它看起来不同于你的硬编码的例子。试试这个JavaScript代替。

var div = document.getElementById('data'); // Get <div id="data"> 
var ul = document.createElement('ul'); // Create <ul class='links-list'> 
ul.className = 'links-list'; 

for (var i = 0; i < 4; ++i){ 
    var url = i; 
    var li = document.createElement('li'); // Create <li> 
    var link = document.createElement('a'); // Create <a> 
    var button = document.createElement('i'); // Create <i> 

    button.className = "myButton"; 
    button.innerHTML = 'text'+i; 

    link.text = "ab "; 
    link.href = url; 
    link.target = '_blank'; 

    link.appendChild(button); 
    li.appendChild(link); 
    ul.appendChild(li); 
} 

div.appendChild(ul);

来源

2016-03-08 17:14:07 OffTheBricks

没有'.class'这样的属性，它是'.className' – LGSon

正确的答案来自LGSon和其他地方。正如我所说的文字只是在这里看到为什么我没有在我的弹出窗口中的内容。一旦我把这些文本，我有文字，但没有按钮。在最终版本中没有文本，只有按钮（在我的CSS中定义的大小和样式）。 – Nucktrooper

动态HTML页面不使用css

回答

相关问题