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

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);
}

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