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

Praveen · Accepted Answer · 2013-12-11 11:46:23Z

2

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
});

edited Dec 11, 2013 at 11:46

answered Dec 11, 2013 at 11:38

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

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

1 Comment

Archana Over a year ago

That was good, can scale thing work the same way? I mean the overlapping part can it zoom like the top part of the image while zooming?

Collectives™ on Stack Overflow

How to inline css in javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related