Javascript 战胜！重要标记，使对话框可定位

我正在编写一个浏览器扩展，并使用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对话框元素，我可以看到JQ计算的绝对位置值（以px为单位），如果我抓取并“拖动”对话框，我可以看到它们的变化。我只是不知道如何得到它们。直截了当的方法

$（this.css（“top”）

返回被覆盖的值（例如，“50%”）。是否有人知道我如何获得这些动态位置值，或者有更好的方法来实现这一点

编辑：让我试着尽可能简单地重复这一点，没有交叉示例。我自己的JQUI小部件的CSS样式正受到另一个站点样式表的影响，因为它们的CSS正在处理广泛的基础JQUI类，如“.ui小部件”。此外，他们正在使用！重要标签。这意味着（我认为）我能应用自己风格的唯一方法是使用更具体的类定义和！重要标签。在我有一些静态设置的情况下，比如字体颜色，这很好用

问题是，我希望JQuery能够动态更新一些CSS，比如位置。因为站点的css将小部件的位置设置为静态，并使用！重要的是，JQ的更新被忽略。我不能只设置自己的css覆盖，因为它需要动态更新。可能的解决办法包括：

以某种方式删除了该文件！站点css上或元素属性中的重要标记
获取动态计算的位置，然后自己设置！重要标签
解决方案2的补充：理想情况下，我会得到JQ在拖动过程中计算的位置。不太吸引人的是重新实施这一点，自己计算位置

编辑2
问题是根本无法覆盖样式。我知道如何使用更具体的css选择器来实现这一点。问题是当我没有一个好的值来覆盖时，我有一个动态变化的值。我想知道是否有更好的方法来处理这个问题，而不是不断地检索该值并设置它（比如以某种方式删除！重要标记）。
是否还有像
id
这样的特定选择器？如果没有
id
，您也可以尝试使用标记名，并将
css
添加到该标记中：

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

它比类的优先级更高，因为它更具体。
您可以使用中描述的一些选项覆盖样式吗？如果您可以直接影响样式表，您可能会有比现在多得多的选项。
是的，我可以，并通过特殊性进行覆盖。这对于字体系列之类的东西非常有用，在这里我可以覆盖一些静态值。问题是它不适用于动态变化的位置之类的东西，除非我不断地检索（如何？）或计算（恼人的）正确的值，然后按照您的描述进行覆盖。可能首先使用JS（
window.innerWidth
，
window.innerHeight
）计算您想要的参数，然后使用
sheet.insertRule（'tagname.ui-widget{top:60%！important；}'，sheet.cssRules.length）添加CSS（参考）。