2

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

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

这意味着我的扩展程序的对话框不再可定位。我通过使用更具体的选择器和我自己的 !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 标记。这在我有一些静态设置的情况下很好用，比如字体颜色。

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

  1. 不知何故，从网站的 css 或元素属性中删除 !important 标记。
  2. 获取动态计算的位置，然后使用 !important 标签自行设置。

解决方案 2 的附录：理想情况下，我会得到 JQ 在拖动期间计算的位置。不那么吸引人的是重新实现这一点并自己计算位置。

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

4

2 回答 2

0

有没有更具体的选择器id？如果没有id，您也可以尝试使用标签名称，然后添加css：

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

由于它更具体，因此它的优先级高于仅类。

于 2013-03-06T23:40:10.417 回答
0

您能否使用此问题中描述的某些选项来覆盖样式？如果您可以直接影响样式表，那么您可能有比现在更多的选择。

于 2013-03-06T23:54:29.493 回答