어떻게 CSS를 동적으로 업데이트 할 수 있습니까? 즉, 사용자에게 글꼴 크기, bckground 색상을 선택할 수있는 옵션을 제공하려고합니다.

Question

안녕하세요, 광산이 Java Spring 프로젝트이므로 글꼴 크기, 배경색 및 창 크기를 변경할 수있는 옵션을 제공하고 싶습니다. 시스템에 로그인 한 후 런타임에. 이 프로젝트는 여러 CSS 페이지를 포함하며 .js 페이지에서 호출됩니다.

나는 고글에이 솔루션을 가지고 있지만 다른 문제를 제기 :

솔루션 A : 우리는 새로운 스타일 요소를 만들 수 document.createElement 기능을 사용할 수 있습니다. 이는 사이트 방문자가 일부 단추 컨트롤을 사용하여 사이트 스타일을 동적으로 변경하는 옵션을 제공하려는 경우에 유용합니다.

예 :이 위의 진술에서

var sheet = document.createElement('style') 
sheet.innerHTML = "div {border: 2px solid black; background-color: blue;}"; 
document.body.appendChild(sheet); 

은 시간이, 나중에 우리가 동일한 코드에 스타일 시트를 제거 할 수있는 CSS 스타일 시트를 작성합니다. 사용자 환경 설정에 따라 다른 스타일 시트간에 전환하여 여러 스타일 시트를 설정하고 현재 사이트 방문자가보고자하는 스타일 시트 만 활성화 할 수 있습니다.

내가 여기까지 질문은 다음과 같습니다 사용 로그 아웃하면

1. 는 캐시에 남아있을 것입니다, 생성 된 스타일 시트 어떻게 될까?
2. 캐시에 남아있는 경우 인터페이스 설정을 변경 한 횟수에 따라 사용자 당 여러 개의 스타일 시트가 있습니까?
3. 사용자가 시크릿 모드 인 경우 어떻게 동작합니까?

누군가 다른 가능한 해결책을 제안 할 수 있다면. 저는 인턴으로 일하고 있으며 이것은 제가 배정 된 첫 번째 임무입니다. TIA

Answer 1

여러 가지 방법이 있습니다. 그리고 답이 너무 많은 질문이 너무 많습니다.

내가 알고있는 것은 스프링 백 엔드를 사용하고 있으며 페이지가 단일 페이지 앱이 아니라는 것입니다.

1. 사용자가 로그 아웃하면 스타일 시트가 캐시에 저장됩니까?

   로그 아웃하는 방법에 따라 다릅니다. 로그 아웃 할 때 다른 페이지로 리디렉션하는 경우 작성한 페이지는 더 이상 사용할 수 없으며 서비스 담당자를 사용하여 캐시에 변경 사항을 저장하지 않거나 전체 설정이 변경된 경우 페이지에서 변경 한 내용이 캐시되지 않습니다. 단일 페이지 앱입니다.

2. 캐시에 남아있는 경우 인터페이스 설정 변경 횟수에 따라 사용자 당 여러 개의 스타일 시트가 있습니까?

   다시 말해 스타일 시트를 만드는 방법에 따라 다릅니다. 기존 스타일 시트를 삭제 한 다음 새 스타일 시트를 삽입 할 수 있습니다. 이런 식으로 항상 사용자 당 하나의 스타일 시트 만있을 것입니다.

3. 사용자가 시크릿 모드 인 경우 어떻게 동작합니까?
   서비스 작업자를 사용하여 캐싱하지 않으면이 영향이 없습니다.당신이 할 수있는 일

는 JSON 값으로

1. 저장 사용자 환경 설정하고 사용자가 명확 기존 스타일 시트를 로그 오프하면 다음
2. 을 그 JSON을 사용하여 스타일 시트 값들 만듭니다. 같은 사용자가 로그인하면
3. 다시 존재인지 다시 스타일 시트를 생성하거나 다른 서버에서 기본 설정을 가져 다음