在 jQuery 上使用 !important 更改 fullcalendar 的 css 类属性 [重复]

Posted 2023-02-22

【中文标题】在 jQuery 上使用 !important 更改 fullcalendar 的 css 类属性 [重复]

【英文标题】：Change css class property of fullcalendar with !important on jQuery [duplicate]

【发布时间】：2014-08-27 13:12:14

【问题描述】：

我想通过带有 !important 标签的 jQuery 更改 fullcalendar 的选定单元格 css，我想在不指定元素 ID 和类名的情况下执行此操作：

这不起作用：

$('.fc-cell-overlay').css('height', '40px !important');

想法？

更新

我认为这比我问的要复杂。对不起，如果我不够详细。我想在 jQuery cos 中执行此操作 如果假设我正在执行每 60 分钟持续时间（高度应为 40 像素）而不是每 30 分钟持续时间（高度应为 20 像素），我想在完整日历中动态更改单元格的高度值) 同时禁用拖动功能。这是我在这里找到的一个 hack：How to disable the drag in FullCalendar but keep the ability to click on a time slot and have the "placeholder" appointment still render。

我无法按照@climbinghobo 的建议更改css，因为如果您不单击单元格，css 还不存在。显然完整的日历还没有这个功能，所以我不得不解决它。

【问题讨论】：

检查这个!important using Jquery

为什么要重要关键字？如果没有重要的关键字，它将覆盖您的原始样式。 jsfiddle.net/6EHBc

【参考方案1】：

JQuery 不理解“！important”。你有几个选择：

使用此规则添加一个类并将该类添加到您的元素中： css：.important-rule height: 40px !important; js:$('.fc-cell-overlay').addClass('important-rule')

在文档头部添加规则： js:$("<style type='text/css'> .fc-cell-overlay height: 40px !important; </style>").appendTo("head");

使用@Shaunak D 提供的链接中的解决方法代码，用!important“熟悉”JQuery

作为旁注，我会尽量避免使用 !important。看看你是否可以用你的选择器提供更多的特异性。请注意，正如 Suresh Ponnukalai 所写，JQuery 生成的内联规则将覆盖任何 css 规则，而不使用 !important。

【讨论】：

谢谢你。不过我有一个问题，在全日历中，“.fc-cell-overlay”最初不会存在，除非您单击一个不起作用的单元格。我想在 jQuery cos 中执行此操作，如果假设我在全日历中每 60 分钟（高度应为 40 像素）而不是每 30 分钟（高度应为 20 像素）持续时间，我想动态更改高度值。我在这里找到了改变高度的技巧：***.com/questions/4903140/…

那么我建议的第二个选项仍然有效......

老实说忽略了这一点。我会试一试并更新你谢谢

嗯，你知道什么，就像一个魅力！非常感谢@climbinghobo！

【参考方案2】：

也许你可以这样做：

  $('.fc-cell-overlay').attr('style','height:40px');

它将覆盖css，因为它的内联样式。

【讨论】：

我猜你期待“为什么？”

因为 OP 要求仅覆盖该高度属性。您的回答将覆盖该样式属性中的所有属性。谢谢

他可以做 $(this) 并且它只会覆盖点击一个

它不属于任何事件处理程序。

是的，但可能是这样，不清楚。加上他所指的类“.fc-cell-overlay”可能是仅包含选定元素的类（这将是合乎逻辑的），在这种情况下，这个脚本也可以工作。