Greasemonkey/Tampermonkey를 사용하여 특정 요소의 CSS 스타일을 어떻게 재정의할 수 있나요?

Greasemonkey/Tampermonkey로 CSS 스타일 재정의

웹 개발에서 페이지의 특정 요소의 모양을 변경하는 것은 CSS( 계단식 스타일 시트). 특정 CSS 클래스에 속하는 경우와 같이 특정 조건에서만 HTML 요소의 배경 이미지를 수정해야 하는 경우 Greasemonkey 또는 Tampermonkey 스크립트를 사용하여 이를 수행할 수 있습니다.

Greasemonkey 및 Tampermonkey

Greasemonkey와 Tampermonkey는 사용자가 웹페이지의 콘텐츠와 동작을 수정하는 스크립트를 실행할 수 있게 해주는 브라우저 확장 프로그램입니다. CSS 스타일 수정 기능을 포함하여 온라인 경험을 향상시키는 다양한 기능을 제공합니다.

GM_addStyle()로 CSS 수정

Greasemonkey 또는 Tampermonkey 스크립트의 경우 GM_addStyle() 함수를 사용할 수 있습니다. 이 기능은 기존 스타일을 재정의하는 사용자 정의 CSS 규칙을 포함할 수 있는 새 스타일 시트를 페이지에 추가합니다.

예제 스크립트

" 배너_url" 클래스를 선택하고 배경 이미지를 특정 URL로 설정하려면 다음 Greasemonkey 또는 Tampermonkey 스크립트를 사용할 수 있습니다.

// ==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;
    }
` );

중요 사항

• 사용 CSS 규칙의 !important 플래그를 사용하여 충돌하는 스타일을 재정의하도록 합니다.
• 최적의 성능을 위해 @run-at document-start를 사용하여 초기 페이지 렌더링 후 스타일 변경으로 인해 발생하는 "깜박임" 효과를 최소화하세요. .
• Greasemonkey 4를 사용하는 경우 GM4가 필수 GM_addStyle() 기능에 대한 지원을 중단했으므로 Tampermonkey 또는 Violentmonkey로 전환하는 것을 고려해 보십시오.

대체 솔루션: Stylus

더 고급 CSS 조작을 원할 경우 스타일러스 확장 사용을 고려해 보세요. 스타일러스는 웹페이지에서 CSS 스타일을 관리하기 위한 강력한 사용자 인터페이스와 다양한 기능을 제공합니다.

위 내용은 Greasemonkey/Tampermonkey를 사용하여 특정 요소의 CSS 스타일을 어떻게 재정의할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!