克服！重要标签，使对话可定位

Question

我正在编写一个浏览器扩展，并使用JQueryUI弹出一个模态对话框。问题是某些站点（例如espn.com）也使用JQueryUI。他们将样式应用于基本的JQueryUI元素，而不是使用它们自己的元素。令人不安的例子是：

.ui-widget{
   top:50% !important;
}

这意味着我的扩展程序对话框不再可定位。我通过使用更具体的选择器和我自己的！重要标签克服了其他样式问题，但是这个问题让我很难过。我不希望以任何方式修复对话框的位置，我希望JQueryUI能够在拖动对话框时计算和更新位置，或者我执行以下操作：

$( ".selector" ).dialog( "option", "position", { my: "center", at: "center", of: window });

不幸的是，除了auto之外我唯一能给出的值（根本不起作用）是固定值。除非有人对我有CSS技巧，否则我认为我需要动态获取JQ在拖动过程中计算的位置并覆盖任何存在重要标记的位置。我想我需要做一些像

这样的事情

$(this).css("top", calculatedVal + " !important");

但我不确定如何获得计算值。如果我打开chrome的开发工具并选择.ui-dialog元素，我可以看到JQ计算的绝对位置值（以px为单位），如果我抓住并“拖动”对话框，我可以看到它们发生变化。我只是不知道如何得到它们。直截了当的方法

$(this).css("top");

返回覆盖的值（例如，'50％'）。有谁知道如何获得这些动态位置值，或者有更好的方法来解决这个问题？

编辑：让我尝试尽可能简单地重申这一点，没有交错示例。我自己的JQUI小部件的CSS样式受到另一个网站的样式表的影响，因为他们的CSS正在开发广泛的基础JQUI类，如'.ui-widget'。此外，他们正在使用！important标签。这意味着（我认为）我可以通过使用更具体的类定义并使用！important标记来获得自己的样式。这适用于我有一些静态设置的情况，比如font-color。

问题是，我希望JQuery能够动态更新一些CSS，比如位置。因为站点的css将widget位置设置为静态并且通过使用！important强制它保持这种状态，所以JQ的更新被忽略。我不能只设置自己的CSS覆盖，因为它需要动态更新。可能的解决方案包括：

1. 以某种方式删除网站的css或元素属性中的！important标记。
2. 获取动态计算的位置，然后使用！important标记自行设置。

解决方案2的附录：理想情况下，我会得到JQ在拖动过程中计算的位置。不太吸引人的是重新实现这个并自己计算位置。

编辑2 问题根本无法覆盖样式。我理解如何通过使用更具体的css选择器来做到这一点。问题是当我没有一个好的值来覆盖时，而是我有一个动态变化的值。我想知道是否有更好的方法来处理这个问题，而不是不断检索该值并设置它（比如以某种方式删除！important标记）。

Answer 1

是否有更具体的选择器，如id？如果没有id，您也可以尝试使用代码名称，并将css添加到该代码：

tagname.ui-widget {
    top: 60% !important;
}

它的优先级高于类，因为它更具体。

Answer 2

你可以使用this question?中描述的一些选项覆盖样式吗？如果你可以直接影响样式表，你可能会有比现在更多的选项。