[javascript] JavaScript에서 CSS 의사 클래스 규칙 설정

JavaScript에서 의사 클래스 선택기 (예 : : link, : hover 등)에 대한 CSS 규칙을 변경하는 방법을 찾고 있습니다.

따라서 CSS 코드의 아날로그 : a:hover { color: red }JS에서.

다른 곳에서는 답을 찾을 수 없었습니다. 이것이 브라우저가 지원하지 않는 것임을 아는 사람이 있다면 도움이 될 것입니다.

답변

인라인 style = “…”속성에 의사 클래스를 가질 수없는 것과 같은 방식으로 (선택자가 없기 때문에) 특정 요소에서만 의사 클래스의 스타일을 지정할 수 없습니다.

예를 들어 규칙을 추가하여 스타일 시트를 변경하여이를 수행 할 수 있습니다.

#elid:hover { background: red; }

영향을 미치려는 각 요소에 선택할 수있는 고유 ID가 있다고 가정합니다.

이론상 원하는 문서는 http://www.w3.org/TR/DOM-Level-2-Style/Overview.html 입니다. 즉, 다음과 같은 구문을 사용하여 (기존의 삽입 또는 링크 된 스타일 시트가있는 경우) 가능합니다.

document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);
document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';

물론 IE에는 자체 구문이 필요합니다.

document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0);
document.styleSheets[0].rules[0].style.backgroundColor= 'red';

이전 및 부 브라우저는 두 구문을 모두 지원하지 않을 수 있습니다. 동적 스타일 시트 조작은 제대로하기가 매우 성 가시고, 거의 필요하지 않으며, 역사적으로 번거롭기 때문에 거의 수행되지 않습니다.

답변

JS에서 스타일 시트를 조작하는 데 유효한 사용 사례가 있다고 생각 하기 때문에 이를 위해 작은 라이브러리를 모았습니다 . 이유 :

계산하거나 검색해야하는 스타일 설정 (예 : 쿠키에서 사용자가 선호하는 글꼴 크기 설정)
특히 UI 위젯 / 플러그인 개발자를위한 행동 (미적 아님) 스타일 설정. 탭, 캐 러셀 등은 단순히 작동하기 위해 기본 CSS가 필요한 경우가 많습니다 . 핵심 기능에 대한 스타일 시트를 요구 해서는 안됩니다 .
CSS 규칙이 현재 및 미래의 모든 요소에 적용되고 Firebug / 개발자 도구에서 볼 때 HTML을 어지럽히 지 않기 때문에 인라인 스타일보다 좋습니다.

답변

브라우저 간 문제에 대처하는 기능 :

addCssRule = function(/* string */ selector, /* string */ rule) {
  if (document.styleSheets) {
    if (!document.styleSheets.length) {
      var head = document.getElementsByTagName('head')[0];
      head.appendChild(bc.createEl('style'));
    }

    var i = document.styleSheets.length-1;
    var ss = document.styleSheets[i];

    var l=0;
    if (ss.cssRules) {
      l = ss.cssRules.length;
    } else if (ss.rules) {
      // IE
      l = ss.rules.length;
    }

    if (ss.insertRule) {
      ss.insertRule(selector + ' {' + rule + '}', l);
    } else if (ss.addRule) {
      // IE
      ss.addRule(selector, rule, l);
    }
  }
};

답변

템플릿 문자열에 CSS를 넣으십시오.

const cssTemplateString = `.foo:[psuedoSelector]{prop: value}`;

그런 다음 스타일 요소를 만들고 스타일 태그에 문자열을 배치하고 문서에 첨부합니다.

const styleTag = document.createElement("style");
styleTag.innerHTML = cssTemplateString;
document.head.insertAdjacentElement('beforeend', styleTag);

특이성이 나머지를 처리합니다. 그런 다음 스타일 태그를 동적으로 제거하고 추가 할 수 있습니다. 이것은 라이브러리에 대한 간단한 대안이며 DOM의 스타일 시트 배열을 엉망으로 만듭니다. 행복한 코딩!

답변

내 트릭은 속성 선택기를 사용하는 것입니다. 속성은 자바 스크립트로 설정하기가 더 쉽습니다.

CSS

.class{ /*normal css... */}
.class[special]:after{ content: 'what you want'}

자바 스크립트

  function setSpecial(id){ document.getElementById(id).setAttribute('special', '1'); }

HTML

<element id='x' onclick="setSpecial(this.id)"> ...

답변

또 다른 대안이 있습니다. 의사 클래스를 직접 조작하는 대신 “hover”클래스 또는 “visited”클래스와 같이 동일한 것을 모델링하는 실제 클래스를 만듭니다. 일반적인 “.”로 클래스 스타일을 지정합니다. 그런 다음 적절한 이벤트가 발생하면 JavaScript를 사용하여 요소에서 클래스를 추가하거나 제거 할 수 있습니다.

답변

자바 스크립트로 의사 클래스 규칙을 직접 설정하는 대신 다른 CSS 파일에서 규칙을 다르게 설정 한 다음 자바 스크립트를 사용하여 한 스타일 시트를 끄고 다른 스타일 시트를 켤 수 있습니다. 방법은 A List Apart (자세한 내용은 qv.)에 설명되어 있습니다.

CSS 파일을 다음과 같이 설정하십시오.

<link rel="stylesheet" href="always_on.css">
<link rel="stylesheet" title="usual" href="preferred.css"> <!-- on by default -->
<link rel="alternate stylesheet" title="strange" href="alternate.css"> <!-- off by default -->

그런 다음 javascript를 사용하여 전환합니다.

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")<i>); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}