Add CSS z-index property to css variable in JQuery

Question

I am trying to add css property to my css variable in Jquery.

var cssProp = {
    'position': 'absolute',
    'top': topPos,
    'left': leftPos
}

//this codes works
cssProp.top += 10;

//this is not..
cssProp.z - index = 10;

How to fix this? Thanks a lot!

Have you tried cssProp.zIndex=10;?

j08691
– j08691

2012-09-07 20:22:12 +00:00
Commented Sep 7, 2012 at 20:22 — j08691
– j08691, Commented Sep 7, 2012 at 20:22

Joseph Silber · Accepted Answer · 2012-09-07 20:38:34Z

2

Dashes in properties when using dot notation are not allowed

cssProp['z-index'] = 10;

Note that css properties when talking about element.style all dashed elements in CSS are camel cased in JavaScript so it would propbably actually be cssProp.zIndex = 10;

edited Sep 7, 2012 at 20:38

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

answered Sep 7, 2012 at 20:22

JaredMcAteer

22.7k5 gold badges52 silver badges68 bronze badges

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

Comments

Dfranc3373 · Accepted Answer · 2012-09-07 20:23:10Z

0

Possibly because z-index is not defined in cssProp

Try

var cssProp = {'position':'absolute',
                 'top': topPos,
                 'left': leftPos,
                 'z-index': 0
            }

answered Sep 7, 2012 at 20:23

Dfranc3373

2,1775 gold badges31 silver badges44 bronze badges

Comments

Logard · Accepted Answer · 2012-09-07 20:23:29Z

0

Doing it the way you are you are creating a new variable called "z-index", which is invalid in javascript, and therefore not working.

Try calling it "zIndex" instead, that is a valid javascript variable name.

answered Sep 7, 2012 at 20:23

Logard

1,5131 gold badge13 silver badges27 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:03:18Z

0

Using - (dash) as a variable name/object key is not valid in javascript. Try using camelCase notation as zIndex.

Read more:

Are dashes allowed in javascript variable names?

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Sep 7, 2012 at 20:26

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Comments

afreeland · Accepted Answer · 2012-09-07 20:39:46Z

0

Like this

var cssProp = {
    'position':'absolute',
    'top': topPos,
    'left': leftPos,
    'zIndex': '0'
};

jQuery always removes the '-' and then concatenates the word using the camelcase style type. I believe jQuery then has a regular expression that accomplishes this...

edited Sep 7, 2012 at 20:39

answered Sep 7, 2012 at 20:27

afreeland

4,0094 gold badges33 silver badges44 bronze badges

Collectives™ on Stack Overflow

Add CSS z-index property to css variable in JQuery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

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

Linked

Related