JS를 사용하여 웹 페이지 본문의 배경색을 동적으로 수정하는 예를 공유하세요.

이 글은 주로 JS를 이용하여 웹 페이지 본문의 배경색을 동적으로 수정하는 예제 코드를 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

대부분의 웹 페이지의 기본 배경색은 흰색인데 개인적으로 눈부신 느낌이 들어서 본문 부분의 배경색을 변경하는 JS 스크립트를 작성했습니다.

// ==UserScript==
// @name    ChangeBackgroundColor
// @namespace  tingl
// @include   *
// @version   1
// @grant    none
// ==/UserScript==
(function () {
 'use strict';
 var color = '#ececec';
 var style;
 function createStyle() {
  style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = 'body {background-color: ' + color + ' !important;}';
 }
 function changeBackgroundColor() {
  if(!style.parentNode) document.head.appendChild(style);
 }
 createStyle();
 changeBackgroundColor();
 document.head.addEventListener("DOMNodeRemoved",changeBackgroundColor);
}) ()

코드는 비교적 간단합니다. 본문을 직접 생성하면 CSS 스타일 규칙이 헤드에 추가됩니다. 웹 페이지 콘텐츠가 변경되거나 비동기 업데이트로 인해 스타일이 제거되면 이벤트 수신 메커니즘을 통해 헤드에 다시 추가됩니다.

단순히 본체의 배경색만 변경하기 때문에 스크립트 적용 범위가 제한되어 있습니다.

관련 권장 사항:

링크 클릭 시 배경색을 표시하는 jquery 방법

CSS3 그라데이션 배경색 사용 방법 IE9+와 호환

배경색 웹 페이지 특수 효과 CSS 코드 표시

위 내용은 JS를 사용하여 웹 페이지 본문의 배경색을 동적으로 수정하는 예를 공유하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!