使用Greasemonkey/JQuery隐藏网页中的价格元素

lvjbypge  于 2023-06-05  发布在  jQuery
关注(0)|答案(1)|浏览(165)

我试图使用Greasemonkey隐藏这个CSS路径中的price元素。

html body div#__nuxt div#__layout div.lv-default-layout.-header-is-immersive main#main.lv-default-layout__content div.lv-category div.lv-paginated-list.lv-product-list ul.lv-list.lv-product-list__items li#lv-card-M46279.lv-product-list__item div.lv-product-card.-has-mini-slider.-full-bleed.-default-variant div.lv-product-card__wrap div.lv-product-card__info-wrapper div.lv-product-card__info div.lv-price.lv-product-card__price.body-xs

基于其他SO答案,我编写了以下Greasemonkey脚本

// ==UserScript==
// @name        hide-LV-prices
// @include     https://ap.louisvuitton.com/*
// @description Hides prices on Louis Vuitton page  
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant       GM_addStyle
// ==/UserScript==

$(".lv-product-card__price.body-xs").hide()

但价格仍在显示。原始URL为https://ap.louisvuitton.com/eng-sg/bags/for-women/all-handbags/_/N-t1rrahxp。HTML的例子是:

<div class="lv-price lv-product-card__price body-xs"><!----> 
<span class="notranslate">S$ 5,500.00</span> <!---->
</div>
e4eetjau

e4eetjau1#

JavaScript代码在运行时进行更改。另一方面,CSS规则在添加时以及从那时起(除非被覆盖)进行更改。
正如wOxxOm所提到的,CSS将应用于稍后创建的元素。
下面是一个示例用户脚本。

备注

当前GM4不支持GM_addStyle/GM.addStyle
GM_addStyle/GM.addStyle在FireMonkey、Tampermonkey和Violentmonkey中受支持。

<div class="lv-price lv-product-card__price body-xs"><!----> 
  <span class="notranslate">S$ 5,500.00</span> <!---->
</div>

FireMonkey、Tampermonkey、Violentmonkey

// ==UserScript==
// @name          hide-LV-prices
// @include       https://ap.louisvuitton.com/*
// @description   Hides prices on Louis Vuitton page  
// @grant         GM.addStyle
// ==/UserScript==

const css = 
`.lv-product-card__price.body-xs {
  display: none !important;
}`;

GM_addStyle(css);

油猴

// ==UserScript==
// @name          hide-LV-prices
// @include       https://ap.louisvuitton.com/*
// @description   Hides prices on Louis Vuitton page  
// @grant         GM.addStyle
// ==/UserScript==

GM.addStyle = (css) => {
  const style = document.createElement('style');
  style.textContent = css;
  (document.head || document.body).appendChild(style);
};

const css = 
`.lv-product-card__price.body-xs {
  display: none !important;
}`;

GM_addStyle(css);

您还可以为所有用户脚本管理器创建一个用户脚本。

FireMonkey、Greasemonkey、Tampermonkey、Violentmonkey

// ==UserScript==
// @name          hide-LV-prices
// @include       https://ap.louisvuitton.com/*
// @description   Hides prices on Louis Vuitton page  
// @grant         GM.addStyle
// ==/UserScript==

// check if GM.addStyle is supported
if (typeof GM.addStyle !== 'function') {
  // define GM.addStyle
  GM.addStyle = (css) => {
    const style = document.createElement('style');
    style.textContent = css;
    (document.head || document.body).appendChild(style);
  };
}

const css = 
`.lv-product-card__price.body-xs {
  display: none !important;
}`;

GM_addStyle(css);

相关问题