Greasemonkey/Tampermonkey로 클래스 CSS를 덮어쓰는 방법은 무엇입니까?

Greasemonkey/Tampermonkey로 클래스 CSS를 덮어쓰는 방법

이 시나리오의 목표는 body 요소의 배경 이미지를 수정하는 것입니다. , 특히 Greasemonkey 또는 Tampermonkey 스크립트를 사용하여 "banner_url" 클래스를 포함하는 경우. 이를 달성하는 방법은 다음과 같습니다.

CSS 캐스케이드 사용

요소의 스타일을 직접 수정하는 대신 CSS 캐스케이드를 사용하여 기존 CSS 규칙을 덮어쓸 수 있습니다. 이렇게 하려면 GM_addStyle()을 사용하여 페이지에 스타일 시트를 추가합니다.

// ==UserScript==
// @name     _Override banner_url styles
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// @run-at   document-start
// ==/UserScript==

GM_addStyle(`
    .banner_url {
        background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed !important;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important;
    }
`);

이 스크립트에서는 "문서 시작" 메타데이터가 추가되어 다음과 같은 경우 발생할 수 있는 "깜박임"을 최소화합니다. 스타일은 초기 렌더링 후 변경됩니다.

Greasemonkey 4를 사용한 대체 접근 방식

GM_addStyle()이 제거된 Greasemonkey 4를 사용하는 경우 다음 심을 사용할 수 있습니다. 이 문제를 극복하려면:

function GM_addStyle (cssStr) {
    var D = document;
    var newNode = D.createElement('style');
    newNode.textContent = cssStr;

    var targ = D.getElementsByTagName('head')[0] || D.body || D.documentElement;
    targ.appendChild(newNode);
}

스타일러스를 사용한 순수 CSS 조작

Greasemonkey 및 Tampermonkey 외에도 더 나은 옵션을 제공하는 Stylus 확장 사용을 고려할 수도 있습니다. 순수한 CSS 조작을 위해. 이를 통해 CSS 규칙을 직접 수정할 수 있으므로 특정 작업에 더 적합한 선택이 됩니다.

위 내용은 Greasemonkey/Tampermonkey로 클래스 CSS를 덮어쓰는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!