jQuery setting attributes with functions

Question

I wrote a simple function:

function addColoredBorder(color) {
    $(".coloredBorder").css({
        border-left: color,
        padding-left: "15px",
        border-radius: "10px"
    });
};

Then in HTML i would call the function, but for some reason, it doesn't accept it. I know, you could do:

function f_border () {
  return "border:"
}

function f_attribute(x) {
  return x
}

function addColoredBorder() {
    $(".coloredBorder").css(f_border(), f_attribute());
});

But i need it to be as compact and simple for it to be as possible. toggleClass is out of question.

So experts, how can i set color without writing massive amounts of code?

(PS. The second block of code might not be correct at all, but i believe it goes somewhat like that.)

"it doesn't accept it" please expand on this, in what way does it not accept it? — Patrick Evans
– Patrick Evans, Commented Jul 9, 2014 at 23:57
Your problem is that your css attributes are not in quotes. it should be "border-left": color, etc. — sharf
– sharf, Commented Jul 9, 2014 at 23:59

Chris Tate · Accepted Answer · 2014-07-10 00:00:32Z

1

Remove the colon from border: in the f_border() function.

answered Jul 10, 2014 at 0:00

Chris Tate

4582 silver badges10 bronze badges

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

Comments

Justen Palmer · Accepted Answer · 2014-07-10 00:01:11Z

1

You are trying to set the property border-left to a color. However, that is not the correct syntax for border-left. It should be set to something like 1px solid #333. Therefore, if you want to write a function to change that do the following:

function addColoredBorder(color) {
    $(".coloredBorder").css({
        'border-left': '1px solid '+color,
        'padding-left': "15px",
        'border-radius': "10px"
    });
};

answered Jul 10, 2014 at 0:01

Justen Palmer

843 bronze badges

Comments

sahbeewah · Accepted Answer · 2014-07-10 00:00:15Z

0

The javascript parser is not happy to have unquoted dashes in your object keys.

    "border-left": color,
    "padding-left": "15px",
    "border-radius": "10px"

or, jQuery supports camel-casing your CSS keys too:

    borderLeft: color,
    paddingLeft: "15px",
    borderRadius: "10px"

answered Jul 10, 2014 at 0:00

sahbeewah

2,6901 gold badge15 silver badges18 bronze badges

Comments

Patrick Evans · Accepted Answer · 2014-07-10 00:00:44Z

0

object literal property names cannot have dashes in them unless they are quoted. So you need to use the camelCase version of the css properties or quote them

So code should look like:

function addColoredBorder(color) {
    $(".coloredBorder").css({
        "borderLeft": color,
        "paddingLeft": "15px",
        "borderRadius": "10px"
    });
};

answered Jul 10, 2014 at 0:00

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Comments

Bhasyakarulu Kottakota · Accepted Answer · 2014-07-10 00:24:59Z

There are syntax errors that causing issues.

 <html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
            function addColoredBorder(color) {
                $(".coloredBorder").css({
                    'border-color': color,
                    'padding-left': "15px",
                    'border-radius': "10px"
                });
            }
        </script>
    </head>
    <body>
        <div class="coloredBorder" style="border:solid;">
This is a div content        
        </div>
        <button id="but1" onclick="addColoredBorder('red')"> apply red color </button>
    </body>
    </html>

Collectives™ on Stack Overflow

jQuery setting attributes with functions

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related