gpt4 book ai didi

javascript - 不使用 css 的动态 HTML 页面

转载 作者:太空宇宙 更新时间:2023-11-04 10:40:04 25 4
gpt4 key购买 nike

我正在尝试动态设置弹出窗口的内容。

这是第一个 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”,这是一个比较:

静态与动态负载:

Static vs dynamic load

谁能帮我解决这个问题?谢谢。

最佳答案

使用 javascript 为元素赋予 class 的正确方法是 - 不够直观 - classNamesetAttribute。因此,其中任何一个都会添加正确的类:

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>

关于javascript - 不使用 css 的动态 HTML 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35870911/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com