How to inline css in javascript

Question

I have used tables and aligned images in each row. On key press I want to zoom the images at the center. Here is the link: http://fiddle.jshell.net/7Wn47/

I want the below code to be put in single line

image1.style.width="600px";
image1.style.height="320px";
image1.style.transition="2s";

Something like:

image1.setAttribute('style', 'width: 600px; height: 320px; translate(0,150px);z index:1;transition: 2s;transition-delay: 4s');  

But this is not working. But if I use: -webkit-transform:scale(1)

instead of: width: 600px; height: 320px; it works, but doesn't overlap properly.

In my link: Press key 1 to zoom first image-see how it zooms Press key 2 to zoom second image- see how it zooms

There is a difference right?

I don't mind to stick with second one, but the bottom part of the image which is zooming is awkward(Hope it could zoom like top part of the image)

kindly help

Answer 1

Try using cssText, incase if you try to change the css in stylesheet

image1.style.cssText = 'width: 600px; height: 320px; 
                        translate(0,150px);z index:1;transition: 2s;transition-delay: 4s';

Incase jQuery

$('#image1id').css({
  width: 600px,
  height: 320px,
  translate(0,150px),
  zIndex:1,
  transition: 2s,
  transitionDelay: 4s
});