如何使用Jquery在左右CSS规则之间切换？

Question

我使用了CSS类，例如

.dropdown-menu{right:0;}

现在我只需要在客户端替换CSS属性，即

.dropdown-menu{left:0;}

- Mohanrajan

---

很遗憾，您无法修改已被客户端浏览器解析的CSS类属性。您最好的选择是创建一个新类，并通过JavaScript / jQuery分配它，或以其他方式覆盖CSS。 :( - Nostalg.io

Answer 1

您可以尝试以下方法：

$('.dropdown-menu').css({
  'right':'auto',
  'left': '0'
 });

设置right规则的默认值和您想要的left值。

- laaposto

Answer 2

你可以这样做。

$(".dropdown-menu").css('right', '').css( 'left','0' )

---

尝试使用纯JavaScript解决方案。

   document.getElementsByClassName(".dropdown-menu").style.removeAttribute('right');
   $(".dropdown-menu")..css( 'left','0' )

- Pranay Rana

Answer 3

如果您设置了特定的类别，您也可以使用JQuery中的removeClass()和addClass()来实现您所需的功能：

$('#MyElement').removeClass('rightClass');
$('#MyElement').addClass('leftClass');

使用$('#MyElement').removeClass();将删除所有类。

因此，使用OP的示例，您将拥有：

.dropdown-menu-right {right:0;}
.dropdown-menu-left {left:0;}

然后在 JQuery 中将它们替换掉，即：

$('#MyDropDownMenu').removeClass('dropdown-menu-right');
$('#MyDropDownMenu').addClass('dropdown-menu-left');

这样做可以避免您担心样式存在于样式表之外，使未来的更改变得更加容易/简单。

编辑以包含此操作的工作示例：

http://jsfiddle.net/CatmanDoes/e213jza6/

---

JQuery - removeClass, addClass

JQuery - removeClass，addClass

- Hugo Yates

---

抱歉兄弟，我觉得这不太好。因为我只需要改变一个CSS属性，而且这个类是来自Bootstrap核心文件的。可能会影响其他东西。 - Mohanrajan

你永远不应该修改bootstrap文件，而是应该创建另一个样式表，并在bootstrap之后加载它。这样，如果需要的话，您可以轻松地覆盖标准的bootstrap样式。请自问，在6个月（或其他时间）后，当有人（包括你自己）需要进行一些设计更改时，他们会在哪里寻找CSS修改？当然是在样式表中。 - Hugo Yates

好的兄弟，我会尝试并让你知道。 - Mohanrajan

首先，Bootstrap已经为您完成了这项工作，库中有一个pull-right类，因此无需添加或更改任何现有的样式表代码。这里有一个可用的示例：http://jsfiddle.net/CatmanDoes/e213jza6/ - Hugo Yates