Изменение нескольких свойств 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- с-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

ответ

Смежные вопросы