How to pass object as a parameter in Javascript?

Question

I found a few questions on here relating to my question but didn't exactly get the answer I was looking for. I am wanting to do something like this, similar to what jQuery often does:

createCSS("mystyle.css", {
    media: "screen",
    type: "text/css"
});

I tried this to accomplish what I want but it's not working:

var prop = {
    media: '',
    type: ''
};

function createCSS(href, prop) {
    var anchor = document.createElement("link");
    anchor.setAttribute("href", href);
    anchor.setAttribute("media", prop.media);
    anchor.setAttribute("type", prop.type);

    if(typeof anchor != "undefined") {
        document.getElementsByTagName("head")[0].appendChild( anchor );
    }
}

Now, I know I could just create single multiple parameters like createCSS("mystyle.css", "screen", "text/css"); but I don't like that, the other way looks cooler.

Plenty new to javascript so any help would be very much appreciated!

Have you tried to just eliminate the var prop = { ... } declaration? And test if everything else works... — gustavodidomenico
– gustavodidomenico, Commented Feb 1, 2013 at 18:12

bfavaretto · Accepted Answer · 2013-02-01 18:25:08Z

10

You don't have to declare/initialize var prop. Your function looks fine, just call it passing an object as prop, as in your own example:

createCSS("mystyle.css", {
    media: "screen",
    type: "text/css"
});

If the intention with the var prop part was to avoid assigning undefined to the attributes, you need a little tweak inside the function:

function createCSS(href, prop) {
    prop = (typeof prop !== "object") ? {} : prop;
    prop.media = prop.media || 'screen';  // default media will be screen
    prop.href = prop.href || 'text/css';  // default type will be text/css
    // rest of code
}

Some minor improvements I'd suggest:

Your variable anchor does not contain an anchor (<a>) element. Why not call it link?
You don't seem to need the if(typeof anchor != "undefined") conditional. since you're creating the element a few lines above, that variable will never be undefined. You can skip the if and appendChild directly.

edited Feb 1, 2013 at 18:25

answered Feb 1, 2013 at 18:12

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

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

4 Comments

ModernDesigner Over a year ago

Oh, wow. Okay. I would think prop.media and prop.type would render undefined. Thanks!

kms Over a year ago

you can predefine prop, but in that case don't forget to include it into the call: createCSS("mystyle.css", prop)

bfavaretto Over a year ago

You already had it and didn't know it :). Also: I just added a couple of suggestions that may help you improve your code.

ModernDesigner Over a year ago

@Bfavaretto wow! Thanks. I like it. And thanks for letting me know about the unnecessary conditional statement. I found it by sniffing around online and didn't really like the looks of it anyway. Good suggestions, too.

Travis J · Accepted Answer · 2013-02-01 18:23:02Z

4

"I tried this to accomplish what I want but it's not working"

The way you pass your object is fine. Although there are some interesting choices in the function, it does what you are asking. However, have you inspected the link you create? It lacks the rel directive which is a requirement.

You may want to change your function to this:

function createCSS(href, prop) {
 var anchor = document.createElement("link");
 anchor.setAttribute("href", href);
 anchor.setAttribute("media", prop.media);
 anchor.setAttribute("type", prop.type);
 anchor.setAttribute("rel", prop.rel);
 document.getElementsByTagName("head")[0].appendChild( anchor );
}

var prop = { 
 media: "screen",
 type: "text/css",
 rel: "stylesheet"
}

createCSS( "mystyle.css", prop );

answered Feb 1, 2013 at 18:23

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

1 Comment

ModernDesigner Over a year ago

@TravisJ Thanks! It actually took me like 10 minutes to figure out why test.css wasn't working, and it was because of the rel. +1

Collectives™ on Stack Overflow

How to pass object as a parameter in Javascript?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related