JavaScript를 통해 CSS 의사 요소 스타일 변경

JavaScript를 통해 CSS 의사 요소 스타일 변경

---

JavaScript를 통해 CSS 의사 요소 스타일을 변경할 수 있습니까?

예를 들어, 다음과 같이 스크롤바의 색상을 동적으로 설정하고 싶습니다.

document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");

또한 스크롤바에 다음과 같이 숨길 수 있기를 원합니다.

document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";

그러나이 두 스크립트는 모두 다음을 반환합니다.

포착되지 않은 TypeError : null의 'style'속성을 읽을 수 없습니다.

이것에 대해 다른 방법이 있습니까?
브라우저 간 상호 운용성은 중요하지 않으며 웹킷 브라우저에서 작동하는 데 필요합니다.

---

편집 : 이 답변이 설명하는 것처럼 JavaScript를 통해 CSS 의사 요소 스타일을 직접 변경하는 방법 이 기술적으로 있지만 여기에 제공된 방법이 더 좋습니다.

JavaScript에서 의사 요소의 스타일을 변경하는 가장 가까운 방법은 클래스를 추가 및 제거한 다음 해당 클래스와 함께 의사 요소를 사용하는 것입니다. 스크롤바를 숨기는 예 :

CSS

.hidden-scrollbar::-webkit-scrollbar {
   visibility: hidden;
}

자바 스크립트

document.getElementById("editor").classList.add('hidden-scrollbar');

나중에 동일한 클래스를 제거하려면 다음을 사용할 수 있습니다.

document.getElementById("editor").classList.remove('hidden-scrollbar');

---

직접 참조가없는 기존 항목을 편집하려면 페이지의 모든 스타일 시트를 반복 한 다음 각각의 모든 규칙을 반복 한 다음 선택기와 일치하는 문자열을 반복해야합니다.

여기에 js에서 설정하는 쉬운 버전 인 의사 요소에 대한 새 CSS를 추가하기 위해 게시 한 방법에 대한 참조가 있습니다.

자바 스크립트 세트 CSS : 스타일 이후

var addRule = (function (style) {
    var sheet = document.head.appendChild(style).sheet;
    return function (selector, css) {
        var propText = typeof css === "string" ? css : Object.keys(css).map(function (p) {
            return p + ":" + (p === "content" ? "'" + css[p] + "'" : css[p]);
        }).join(";");
        sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
    };
})(document.createElement("style"));

addRule("p:before", {
    display: "block",
    width: "100px",
    height: "100px",
    background: "red",
    "border-radius": "50%",
    content: "''"
});

sheet.insertRule 나중에 편집하는 데 사용할 수있는 참조를 가져 오는 데 사용할 수있는 새 규칙의 색인을 리턴합니다.

---

이전 브라우저의 정상적인 성능 저하에 익숙하다면 CSS Vars를 사용할 수 있습니다. 내가 여기와 다른 곳에서 본 방법 중 가장 쉬운 방법입니다.

따라서 CSS에서 다음과 같이 작성할 수 있습니다.

#editor {
  --scrollbar-background: #ccc;
}

#editor::-webkit-scrollbar-thumb:vertical {
  /* Fallback */
  background-color: #ccc;
  /* Dynamic value */
  background-color: var(--scrollbar-background);
}

그런 다음 JS에서 #editor 요소의 해당 값을 조작 할 수 있습니다.

document.getElementById("#editor").style.setProperty('--scrollbar-background', localStorage.getItem("Color"));

JS로 CSS 변수를 조작하는 다른 많은 예제 : https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/

---

JavaScript의 유사 요소에 스타일을 적용 할 수 없습니다.

그러나 <style>문서의 헤드에 태그를 추가 (또는 위치 지정 <style id='mystyles'>및 해당 내용 변경)하여 스타일을 조정할 수 있습니다. (포함 된 <style>태그가 <link>'d 태그보다 우선 순위가 높기 때문에 다른 스타일 시트에서로드하는 것보다 더 잘 작동하므로 계단식 문제가 발생하지 않습니다.

Alternatively, you could use different class names and have them defined with different psuedo-element styles in the original stylesheet.

---

I posted a question similar to, but not completely like, this question.

I found a way to retrieve and change styles for pseudo elements and asked what people thought of the method.

My question is at Retrieving or changing css rules for pseudo elements

Basically, you can get a style via a statement such as:

document.styleSheets[0].cssRules[0].style.backgroundColor

And change one with :

document.styleSheets[0].cssRules[0].style.backgroundColor = newColor;

You, of course, have to change the stylesheet and cssRules index. Read my question and the comments it drew.

I've found this works for pseudo elements as well as "regular" element/styles.

---

Looks like querySelector won't work with pseudo-classes/pseudo-elements, at least not those. The only thing I can think of is to dynamically add a stylesheet (or change an existing one) to do what you need.

Lots of good examples here: How do I load css rules dynamically in Webkit (Safari/Chrome)?

---

An old question, but one I came across when try to dynamically change the colour of the content of an element's :before selector.

The simplest solution I can think of is to use CSS variables, a solution not applicable when the question was asked:

"#editor::-webkit-scrollbar-thumb:vertical {
    background: --editorScrollbarClr
}

Change the value in JavaScript:

document.body.style.setProperty(
    '--editorScrollbarClr', 
     localStorage.getItem("Color")
);

The same can be done for other properties.

ReferenceURL : https://stackoverflow.com/questions/4481485/changing-css-pseudo-element-styles-via-javascript