Greasemonkey 또는 Tampermonkey 스크립트를 사용하여 클래스 CSS를 재정의하는 방법은 무엇입니까?

Greasemonkey 또는 Tampermonkey 스크립트를 사용하여 클래스 CSS를 변경하는 방법

특히 body 요소의 배경 이미지를 수정하려고 할 때 "banner_url" 클래스가 있습니다. getElementByClassName을 사용한 초기 접근 방식은 성공하지 못했지만 Greasemonkey 또는 Tampermonkey 스크립트를 사용하는 간단한 솔루션이 있습니다.

CSS Cascade 및 GM_addStyle 활용

원하는 결과를 얻으려면, CSS 계단식 배열과 GM_addStyle() 함수를 사용하여 사용자 정의 CSS 규칙을 페이지에 삽입합니다. !important 플래그를 사용하면 잠재적인 충돌을 무시할 수 있습니다. 또한 @run-at document-start(또는 Stylus 확장 프로그램)를 사용하면 렌더링 후 스타일 변경과 관련된 시각적 깜박임이 최소화됩니다.

전체 스크립트

// ==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() 기능이 신뢰할 수 없습니다. 안정성을 높이려면 Tampermonkey 또는 Violentmonkey로 전환하는 것이 좋습니다. GM4 사용을 고집하시는 분들을 위해 호환성 심이 제공됩니다.

순수한 CSS 조작

순수한 CSS 조작을 위해서는 Stylus 확장 사용을 고려해 보세요. CSS 관리를 위한 더 큰 유연성과 전용 인터페이스를 제공하므로 이러한 맥락에서 Greasemonkey 또는 Tampermonkey보다 더 적합한 옵션이 됩니다.

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