Chrome扩展程序 - 修改默认HTML

Question

我在Google Chrome扩展程序中使用jQuery来覆盖网站的默认CSS。

.CatalogHoverContent的默认课程为display: none;，但当课程.SmallCatalogItemView或.CatalogItemInner悬停时，会更改为display: block;

我试图通过使用下面的代码覆盖样式来阻止这种情况，但是网站的默认样式似乎覆盖了这个并且CatalogHoverContent类仍然没有显示默认情况下。

.CatalogHoverContent {
 display: block;
}

是否有另一种编辑样式的方法，例如JavaScript？

Answer 1

触发器是CSS。以下屏幕截图中的两个:hover附有<div>个规则：SmallCatalogItemView:hover和.CatalogItemInner:hover：

.SmallCatalogItemView:hover .CatalogItemInner.BigInner {
    padding-bottom: 12px;
    padding-top: 10px;
}

.SmallCatalogItemView:hover .CatalogItemInner.BigInner {
    top: -10px;
}

.SmallCatalogItemView:hover .CatalogItemInner {
    border: 1px solid #ccc;
    height: auto;
    left: -10px;
    top: -20px;
    width: 130px;
    z-index: 6;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
}

.CatalogItemInner:hover {
    position: absolute;
}

.CatalogItemInner, .CatalogItemInner:hover {
    background: #FFF;
    border: 0;
    outline: 0;
    overflow: visible;
    position: absolute;
    margin: 0;
    padding: 0;
}

要停止运行此CSS，有几个选项：

• 使用JavaScript设置每个元素的style属性：

  var elements = document.querySelectorAll(".CatalogItemInner");
  for (var i = 0; i < elements.length; i++) {
      var el = elements[i];
      el.style.border = "none";
      // ...
      // Set the rest of the rules
  }
  

• 使用JavaScript编辑样式表（document.styleSheets[i].cssRules[j].style.removeProperty() MDN）。不过，这需要一些微调。你必须得到正确的指数。 How to change/remove CSS classes definitions at runtime?

• 删除CatalogItemInner课程。这可能会产生意想不到的副作用。

  element.classList.remove("CatalogItemInner");
  

• 查看this并覆盖所有规则：

  // Something like:
  addCSSRule(sheet, ".CatalogItemInner", "border: none");
  // etc.