Why z-index in css can't be accessed through javascript - Stack Overflow

admin管理员组

文章数量:1317894

I created a button of Id tag.When I clicked it, I want it to display a div with z-index 1.But why z-index can't be accessed through javascript:

var tag = document.getElementById('tag');
tag.onclick = function(){

   var tag_div = document.createElement("div");
   tag_div.id = "wow";
    document.body.appendChild(tag_div);
    tag_div.style.border = "1px solid black";
   tag_div.style.position = "absolute";
   tag_div.style.top = "200px";
   tag_div.style.left = "70px";
   tag_div.style.z-index = 1;
      return false;
}

I created a button of Id tag.When I clicked it, I want it to display a div with z-index 1.But why z-index can't be accessed through javascript:

var tag = document.getElementById('tag');
tag.onclick = function(){

   var tag_div = document.createElement("div");
   tag_div.id = "wow";
    document.body.appendChild(tag_div);
    tag_div.style.border = "1px solid black";
   tag_div.style.position = "absolute";
   tag_div.style.top = "200px";
   tag_div.style.left = "70px";
   tag_div.style.z-index = 1;
      return false;
}

• javascript
• css

Share Improve this question Follow asked Sep 6, 2013 at 14:37 dramaseadramasea 3,4901717 gold badges5353 silver badges7777 bronze badges 6

• 2 Not an answer, but I would advocate the use of jQuery, it will make your life much easier. – Felix Weir Commented Sep 6, 2013 at 14:38
• Have you thought about using jQuery .prop? (.attr's replacement) – Myles Commented Sep 6, 2013 at 14:39
• 1 tag_div.style.z minus index cannot have a value assigned to it. – zzzzBov Commented Sep 6, 2013 at 14:40
• What does the error message say? – Felix Kling Commented Sep 6, 2013 at 14:43
• 2 Ah well, that is indeed not very intuitive. The error means that you are trying to assign a value to something that it is not a variable or property (another value in most cases). The - is interpreted as minus operator, hence tag_div.style.z - index produces a value and you cannot assign to it. Here is a simpler example: 5 = 'foo'; or 45 - 3 = '42'; – Felix Kling Commented Sep 6, 2013 at 14:48

 |  Show 1 more ment

6 Answers 6

Sorted by: Reset to default 11

CSS rules in stylesheets use hyphens, CSS properties use camel case, so you need .zIndex

As a general rule of thumb, CSS styles that include hyphens (for the purpose of javascript access) are converted to camelCase. That is to say, z-index bees zIndex just like background-color bees backgroundColor.

See JavaScript and CSS:

In JavaScript, backgroundColor corresponds to the CSS property background-color. JavaScript does not allow hyphens in names, so "camelCase" is used instead.

Try this:

tag_div.style.zIndex = 1;

Your code:

tag_div.style.z-index = 1;

This is invalid Javascript code because of the hyphen -- Javascript sees the hyphen as a minus sign, and interprets it as a subtraction, which will fail.

If you need to access an object property whose name contains a hyphen, you must use the following syntax instead:

obj['property-name']

This is a general rule for all JS properties.

However specifically for CSS properties, they are generally exposed to Javascript using camel-case names rather than hyphenated names (camel-case means no hyphens, but capitalised letters for new words where a hyphen would have been), so the following should work:

tag_div.style.zIndex = 1;

Hope that helps.

All CSS rules that have dashes (background-image, z-index, margin-top) can be accessed through JavaScript using camelCase property values like:

div.style.backgroundImage
div.style.zIndex
div.style.marginTop

It is:

tag_div.style.zIndex = 1;

本文标签： Why zindex in css can39t be accessed through javascriptStack Overflow