0

我想制作一个 javascript 文件（附加到某个网站），它生成可用的样式表，并在单击一个人的名字时更改所选样式表的当前样式表。我这样做：

for(var i=0;i<document.getElementsByTagName("link").length;i++)
{
    var style = document.getElementsByTagName("link").item(i).href   //getting name
    //and here is my problem - I'd like to change that HTML code to js code, so that it                  generates a link wchich should change the style. I can't figure it out how to change that to js.
    <a href="#" onclick="changeCSS(style, 0);">STYLE 3</a>
}

//这是改变样式表的函数（不是我的，但可以工作）

function changeCSS(cssFile, cssLinkIndex) 

{

var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

var newlink = document.createElement("link")
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("type", "text/css");
newlink.setAttribute("href", cssFile);

document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}

您能否验证我的代码并帮助我将带有链接的 HTML 代码更改为 js 代码？

//编辑

很抱歉，但它仍然无法正常工作......我正在使用代码的 wchich 网站有 3 个样式表，但我没有得到任何结果。

for(var i=0;i<document.getElementsByTagName("link").length;i++)
{
  var style = new String(document.getElementsByTagName("link").item(i).href));
  var a = document.createElement("a"); //create an anchor
  a.textContent = a.innerText = "Style "+i; // Set its text to Style+i
  a.onclick = function(){ changeCSS(style,0)}; // When you click it, you call changeCSS 
  document.body.appendChild(a); // Append it to the body
}

我使用了你的代码，就像上面一样。

4

1 回答 1

1

在你的循环内：

var a = document.createElement("a"); //create an anchor
a.textContent = a.innerText = "Style "+i; // Set its text to Style+i
 // When you click it, you call changeCSS 
a.onclick = function(){ changeCSS(style,0)};
document.body.appendChild(a); // Append it to the body

如果要将其附加到另一个元素，请更改

document.body.appendChild(a);

至

whatEverElement.appendChild(a);

一些备注：

  • appendChild添加一个元素作为另一个元素的子元素，就像在changeCSS
  • 我设置了两者textContent并innerText支持旧IE，如果不需要，更改为textContent单独。
  • 假定此代码位于 for 循环中。
  • 根据样式的不同，这里可能存在一个闭包陷阱，如果您发现所有元素都获得相同样式的问题，那就是您遇到的问题，您需要将代码包装在另一个 IIFE 中。

这是一个工作示例

请注意，它不使用更改 CSS，而是提醒，因为我不知道如何在 JSFiddle 中加载外部工作表。

于 2013-06-01T12:50:30.437 回答