jQuery-动态更改CSS类的值

Question

I have an image slider written in jQuery. I need the images to be in groups of two (like a magazine) so i have classes .pageLeft and .pageRight that apply a left- or right-margin equal to the width of the container minus the width of a page img (.page class). I want to be able to fullscreen this slider and dynamically calculate and change the width of the .page and the margin value of the .pageLeft/.pageRight classes. Is there any way to do this, or am I going about this all wrong?

The best way I could think to do this would be to write the classes to the DOM directly, but then I would have to empty and add every time.

Here is an example of what I'm trying to say

nPageWidth = 768;
nPageWidthPlusMargin = ($('#container').width() / 2);
nPageMargin = nPageWidthPlusMargin - nPageWidth;

and then use that value to change margin-left = nPageMargin for the class in the css.

Sorry if this is a confusing question. Thanks for your time.

EDIT: The main reason I'm trying to do it this way is to maintain the aspect ratio of the images by setting the width of the image to be 3:4 the height of the image which is set to 100% of the container.

Answer 1

I think you should use percentages for your margins instead of pixel values.

$("#container .pageLeft").css("margin-right", "5%");
$("#container .pageRight").css("margin-left", "5%");

EDIT Then you won't have to compute margins again and again.

EDIT With CSS only:

#container .pageLeft {
  margin-right: 5%;
}
#container .pageRight {
  margin-left: 5%;
}

Answer 2

Is the purpose of the calculated margins to center the pages? In that case you could wrap the two pages in a wrapper, give that wrapper an explicit width, and set the left and right margins of the wrapper to auto .

Then you don't need to worry about calculating the margins. Just make sure the wrapper has the correct width. This width could, depending on your design, even be set as a percentage of the container. The same goes for the wrapped pages, they could have width: 50% . This way you don't even need Javascript :)

Fiddle: http://jsfiddle.net/F4ktm/