我为图形元素创建了一个名为figBox的元素节点，将其id属性设置为“styleThumbs”并尝试将其附加到 id 为“box”的 div 元素。然后我需要填充图形框，插入一个索引从 0 到 4 的 for 循环。在该循环中，我想创建一个名为“sheetImg”的 img 元素节点，其 src 属性为“na_small_num.png”和"na_style_num.css"的alt属性值（其中 num 是 for 循环中索引的值）。最后，当用户单击其中一个缩略图时，我需要让浏览器加载一个不同的样式表，方法是向“sheetImg”添加一个事件处理程序，该处理程序运行一个匿名函数，将 ID 为“fancySheet”的链接元素的href属性更改为事件目标的alt属性值。这是我已经尝试过的：var figure = document.createElement("figBox"); figure.setAttribute("id", "styleThumbs"); document.getElementById("box").appendChild(figure); for (var i = 0; i = 3; i++) { var img = document.createElement("sheetImg"); img.setAttribute("src", "na_small_num.png"); img.setAttribute("alt", "na_style_" + [i] + ".css");sheetImg.onclick = styleElm.seAttribute("href", "alt");sheetImg.appendChild(figure);检查我的代码的程序将此返回为不正确，考虑到我完全没有经验，这并不奇怪。我哪里出错了？编辑各位，谢谢你们的帮助。我已经弄清楚了这里的大量问题。这是正确的代码：var figBox = document.createElement("figure"); figBox.setAttribute("id", "styleThumbs"); document.getElementById("box").appendChild(figBox);for (var i = 0; i < 5; i++) { var sheetImg = document.createElement("img"); sheetImg.setAttribute("src", "na_small_" + i + ".png"); sheetImg.setAttribute("alt", "na_style_" + i + ".css"); sheetImg.onclick = function(e) { document.getElementById("fancySheet").href = e.target.alt; } figBox.appendChild(sheetImg);}var thumbStyles = document.createElement("style");document.head.appendChild(thumbStyles);
2 回答
慕田峪4524236
TA贡献1875条经验 获得超5个赞
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="na_style_8.css">
</head>
<body>
<div id="box"></div>
</body>
</html>
Javascript
<script type="text/javascript">
var figure = document.createElement('figBox'),
loadStylesheet = (stylesheet) => {
stylesheetElement.setAttribute('href', stylesheet + '?' + new Date().getTime());
},
stylesheetElement = document.querySelector('link[href="na_style.css"]');
figure.setAttribute('id', 'styleThumbs');
document.getElementById('box').appendChild(figure);
for (var i = 0; i < 4; i++) {
var sheetImage = document.createElement('sheetImage');
sheetImage.setAttribute('src', 'na_small_num.png');
sheetImage.setAttribute('alt', 'na_style_' + [i] + '.css');
// Populate figBox with created sheetImage
figure.appendChild(sheetImage);
// Add click event listener to sheetImg element
sheetImage.addEventListener('click', (event) => {
// Load stylesheet with anonymous function
loadStylesheet(event.target.getAttribute('alt'));
});
}
</script>
添加回答
举报
0/150
提交
取消