Change multiple properties of a DOM element with javascript

Question

I have a simple function called loadStyles() here it is:

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

I was wondering if there's another way of adding the values of certain properties except this one: link.rel equals to ..., link.type equals to ..., etc.

I tried something like this:

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

But that doesn't work. I know it's probably stupid to even try it (because my IDE says that this {....} expression is not assignable to type HTML element ^^').

possible duplicate of Setting multiple attributes for an element at once with JavaScript — DavidDomain
– DavidDomain, Commented Jul 2, 2015 at 8:29
I don't think you can natively "add" an object to a DOMElement, since it doesn't support it at all. The fastest solution you have is to either create a function and reference the object (and set every single property using a for loop) or to create your own class and pretend to accept an object of properties as a parameter (but you still will have to loop it to fill the DOMElement properties), which is what jQuery does for many prototypes (.css is an example). Also, you can also (eventually) extend the DOM object, but as far as I know this is not a good practice at all. — briosheje
– briosheje, Commented Jul 2, 2015 at 8:30

Charles · Accepted Answer · 2015-07-02 08:27:57Z

2

I think there are nothing in JavaScript standard.

But you could use a function like that

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

I didn't test it, but it should work.

answered Jul 2, 2015 at 8:27

Charles

11.8k11 gold badges81 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jamie Barker · Accepted Answer · 2015-07-02 08:37:25Z

0

You could create a new object and merge it?

Means it should keep any properties an object currently has, unless they're being overwritten.

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

answered Jul 2, 2015 at 8:37

Jamie Barker

8,2663 gold badges31 silver badges64 bronze badges

Collectives™ on Stack Overflow

Change multiple properties of a DOM element with javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related