jQuery-动态更改CSS类的值

Question

我有一个用jQuery写的图像滑块。 我需要将图像分成两个组（例如杂志），所以我有类.pageLeft和.pageRight，它们应用等于容器宽度减去页面img（.page类）。 我希望能够全屏显示此滑块，并动态计算和更改.page的宽度以及.pageLeft / .pageRight类的边距值。 有什么办法可以做到这一点，还是我做错了一切？

我想做到这一点的最佳方法是将类直接写入DOM，但是随后我将不得不清空并每次添加一次。

这是我想说的一个例子

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

然后使用该值更改css中类的margin-left = nPageMargin。

抱歉，这是一个令人困惑的问题。 谢谢你的时间。

编辑：我试图这样做的主要原因是通过将图像的宽度设置为容器的100％的图像的高度为3：4来保持图像的长宽比。

Answer 1

我认为您应该使用百分比而不是像素值。

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

编辑然后，您将不必一次又一次地计算边距。

仅使用CSS 编辑 ：

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

Answer 2

计算页边距的目的是使页面居中吗？ 在这种情况下，您可以将两个页面包装在一个包装器中，为该包装器指定一个明确的宽度，然后将包装器的左右边距设置为auto 。

然后，您无需担心计算边距。 只要确保包装纸的宽度正确即可。 根据您的设计，该宽度甚至可以设置为容器的百分比。 包装的页面也是如此，它们的width: 50%可以是width: 50% 。 这样，您甚至不需要Javascript :)

小提琴： http : //jsfiddle.net/F4ktm/