3

我在这里发现了一些与我的问题有关的问题，但并没有完全得到我正在寻找的答案。我想做这样的事情，类似于 jQuery 经常做的事情：

createCSS("mystyle.css", {
    media: "screen",
    type: "text/css"
});

我试过这个来完成我想要的，但它不起作用：

var prop = {
    media: '',
    type: ''
};

function createCSS(href, prop) {
    var anchor = document.createElement("link");
    anchor.setAttribute("href", href);
    anchor.setAttribute("media", prop.media);
    anchor.setAttribute("type", prop.type);

    if(typeof anchor != "undefined") {
        document.getElementsByTagName("head")[0].appendChild( anchor );
    }
}

现在，我知道我可以创建单个多个参数，createCSS("mystyle.css", "screen", "text/css");但我不喜欢这样，另一种方式看起来更酷。

很多新的javascript所以任何帮助将非常感激！

4

2 回答 2

10

您不必声明/初始化var prop。您的函数看起来不错，只需调用它传递一个对象 as prop，如您自己的示例中所示：

createCSS("mystyle.css", {
    media: "screen",
    type: "text/css"
});

如果该var prop部分的目的是避免分配undefined给属性，则需要在函数内部进行一些调整：

function createCSS(href, prop) {
    prop = (typeof prop !== "object") ? {} : prop;
    prop.media = prop.media || 'screen';  // default media will be screen
    prop.href = prop.href || 'text/css';  // default type will be text/css
    // rest of code
}

我建议一些小的改进：

  • 您的变量anchor不包含锚 ( <a>) 元素。为什么不叫呢link？
  • 你似乎不需要if(typeof anchor != "undefined")条件。由于您在上面几行创建元素，因此该变量永远不会未定义。可以直接跳过ifand appendChild。
于 2013-02-01T18:12:16.790 回答
4

“我试过这个来完成我想要的，但它不起作用”

您传递对象的方式很好。尽管该功能中有一些有趣的选择，但它可以满足您的要求。但是，您检查过您创建的链接吗？它缺少作为rel要求的指令。

您可能希望将您的功能更改为：

function createCSS(href, prop) {
 var anchor = document.createElement("link");
 anchor.setAttribute("href", href);
 anchor.setAttribute("media", prop.media);
 anchor.setAttribute("type", prop.type);
 anchor.setAttribute("rel", prop.rel);
 document.getElementsByTagName("head")[0].appendChild( anchor );
}

var prop = { 
 media: "screen",
 type: "text/css",
 rel: "stylesheet"
}

createCSS( "mystyle.css", prop );
于 2013-02-01T18:23:02.123 回答