Question

我有一个名为loadStyles()的简单函数，它是：

function loadStyles(url) {
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = url;
        link.media = 'all';
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(link);
}

我想知道是否有另一种方法可以添加某些属性的值，除了这一个： link.rel等于...，link.type等于...等。

我试过这样的事情：

function loadStyles(url) {
    var link = document.createElement('link');
    link += {
        rel: 'stylesheet',
        type: 'text/css',
        href: url,
        media: 'all'
    };
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(link);
}

但这不起作用。我知道甚至尝试它都可能是愚蠢的（因为我的IDE说这个{....}表达式不能分配给HTML元素^^'）。

Answer 1

我认为JavaScript标准中没有任何内容。

但你可以使用类似的功能

function setAttributes(element, attributes) {
  for (var name in attributes) {
    element.setAttributes(name, attributes[name]);
  }
}

function loadStyles(url) {
    var link = document.createElement('link');
    setAttributes(link, {
        rel: 'stylesheet',
        type: 'text/css',
        href: url,
        media: 'all'
    });
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(link);
}

我没有测试它，但它应该可以工作。

Answer 2

您可以创建一个新对象并将其合并吗？

意味着它应该保留对象当前具有的任何属性，除非它们被覆盖。

var newObj = {
    rel: 'stylesheet',
    type: 'text/css',
    href: url,
    media: 'all'
}

function merge_options(objOld,objNew){
    var objReturn = {};
    for (var attrname in objOld) { objReturn[attrname] = objOld[attrname]; }
    for (var attrname in objNew) { objReturn[attrname] = objNew[attrname]; }
    return objReturn;
}

//Create New Object
var newLink = document.createElement('link');
merge_options(newLink, newObj);

//Update Current Object
var oldLink = document.querySelector('link');
merge_options(oldLink, newObj);

使用javascript更改DOM元素的多个属性

2 个答案: