AARRGGHHH Posted January 10, 2018 Share Posted January 10, 2018 My canvas z-index is not working, the canvases are both showing up. Canvas1 displays then canvas2 displays beneath it. HTML: <!-- Canvas locations --> <div id="canvasDisplay" style="position:relative;"> <canvas style="z-index:1; position:relative;" id="canvas1" width="1" height="1">Your browser is too old to support this feature. <br>Please consider updating to a modern browser.</canvas> <canvas style="z-index:2; position:relative;" id="canvas2" width="1" height="1">Your browser is too old to support this feature. <br>Please consider updating to a modern browser.</canvas> </div> This displays canvas1 properly. However, when using JavaScript to hide canvas1 behind canvas2, I get both canvases. JavaScript: cnv1.style = "z-index:2; position:relative;" cnv2.style = "z-index:1; position:relative;" I'd appreciate any assistance. Thank you Link to comment Share on other sites More sharing options...
dsonesuk Posted January 10, 2018 Share Posted January 10, 2018 (edited) Check the JavaScript syntax here https://www.w3schools.com/cssref/pr_pos_z-index.asp Hypens are never used in JavaScript for css property, they use CamelCase instead. Edited January 10, 2018 by dsonesuk Link to comment Share on other sites More sharing options...
AARRGGHHH Posted January 11, 2018 Author Share Posted January 11, 2018 (edited) 1. Actually, I checked that page on w3Schools before posting here. That's how I arrived at the code that I used. But it's not working. 2. I am using camelCase, for example: canvasDisplay But I do not know what you mean by "Hypens", so I do not know how this is causing a problem. Is this a subjective option (like global variables) or a requirement? Did you mean the hyphen in z-index? That's the code used on the page at W3Schools. Please clarify! Thank you very much Edited January 11, 2018 by AARRGGHHH Link to comment Share on other sites More sharing options...
dsonesuk Posted January 11, 2018 Share Posted January 11, 2018 As stated in link the z-index (note the hyphen) for JavaScript syntax is zIndex ( note the camelCase instead of hyphen), any hyphen in css styling properties is camelCased instead, text-align becomes textAlign, background-image becomes backgroundImage when referring to these hyphenated properties. Link to comment Share on other sites More sharing options...
Ingolme Posted January 11, 2018 Share Posted January 11, 2018 In Javascript it is correct to use a hyphen for a CSS property if it's inside a CSS string, but setting the style property as a CSS string is not a common way to set styles, I'm not certain if it will work properly. It would be better to set the Javascript property as such: cnv1.style.zIndex = "2"; cnv2.style.zIndex = "1"; Link to comment Share on other sites More sharing options...
dsonesuk Posted January 11, 2018 Share Posted January 11, 2018 (edited) Then you are looking to use cssText where you can use what you original posted cnv1.style.cssText = "z-index:2; position:relative;" cnv2.style.cssText = "z-index:1; position:relative;" OR cnv1.setAttribute("style", "z-index: 2; position:relative;"); cnv2.setAttribute("style", "z-index: 1; position:relative;"); using .style on it own as you originally had it adjust single properties one at a time, and these must be camelCase Edited January 11, 2018 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now