更改DOM元素的多個屬性與JavaScript

我有一個簡單的函數調用loadStyles()那就是：更改DOM元素的多個屬性與JavaScript

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元素^^'）。

來源

2015-07-02 Ivanka Todorova

的可能重複的[用JavaScript爲元素設置多個屬性一次（http://stackoverflow.com/questions/12274748/setting-multiple-attributes-for-an-element-at-once- with-javascript） – DavidDomain

我不認爲你可以在本地「添加」一個對象到DOMElement，因爲它根本不支持它。最快的解決方案是創建一個函數並引用該對象（並使用for循環設置每個屬性）或創建自己的類並假裝接受屬性對象作爲參數（但您仍然必須循環它以填充DOMElement屬性），這是jQuery爲許多原型所做的（.css是一個示例）。此外，你也可以（最終）擴展DOM對象，但據我所知，這根本不是一個好習慣。 – briosheje

我認爲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); 
}

我沒有測試它，但它應該工作。

來源

2015-07-02 08:27:57 Charles

你可以創建一個新的對象併合並它？

意味着它應該保留對象當前擁有的任何屬性，除非它們被覆蓋。

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

來源

2015-07-02 08:37:25

更改DOM元素的多個屬性與JavaScript

回答

相關問題