javascript(또는 jQuery) 사용 후 :: before 및 :: 등의 CSS 유사 요소 선택 및 조작

JAVASCRIPT / 글쓴이

다음과 같은 CSS 유사 요소를 선택/조작하는 방법이 있습니까?::before그리고.::after(및 1개의 세미콜론이 있는 이전 버전) jQuery를 사용하고 있습니까?

예를 들어, 내 스타일시트에는 다음과 같은 규칙이 있습니다.

.span::after{ content:'foo' }

바닐라 JS 또는 jQuery를 사용하여 ‘foo’를 ‘bar’로 변경하려면 어떻게 해야 합니까?



질문에 대한 답변



또한 데이터 속성을 사용하여 내용을 의사 요소에 전달한 다음 jQuery를 사용하여 다음을 조작할 수 있습니다.

HTML의 경우:

<span>foo</span>

jQuery의 경우:

$('span').hover(function(){
$(this).attr('data-content','bar'); });

CSS의 경우:

span:after {
content: attr(data-content) ' any other text you may want'; }

기타 텍스트가 표시되지 않도록 하려면 다음과 같이 seucolega의 솔루션과 결합할 수 있습니다.

HTML의 경우:

<span>foo</span>

jQuery의 경우:

$('span').hover(function(){
$(this).addClass('change').attr('data-content','bar'); });

CSS의 경우:

span.change:after {
content: attr(data-content) ' any other text you may want'; }


jQuery가 할 수 있는 다른 모든 것들과 함께 대답하기 쉬운 질문이라고 생각하실 겁니다.유감스럽게도 이 문제는 기술적인 문제로 귀결됩니다.css : after 및 : before 규칙은 DOM의 일부가 아니기 때문에 jQuery의 DOM 메서드를 사용하여 변경할 수 없습니다.

JavaScript 또는 CSS 회피책을 사용하여 이러한 요소를 조작하는 방법이 있습니다.사용하는 것은, 고객의 요건에 의해서 다릅니다.

우선, 「최적의」접근법으로 널리 인식되고 있는 것부터 설명하겠습니다.

1) 소정의 클래스 추가/삭제

이 접근법에서는 CSS에 이미 다른 클래스가 생성되어 있습니다.:after또는:beforestyle. 나중에 스타일시트에 이 “새” 클래스를 배치하여 재정의하도록 하십시오.

p:before {
content: "foo"; } p.special:before {
content: "bar"; }

그런 다음 jQuery(또는 vanilla JavaScript)를 사용하여 이 클래스를 쉽게 추가하거나 제거할 수 있습니다.

$('p').on('click', function() {
$(this).toggleClass('special'); }); 


$('p').on('click', function() {
$(this).toggleClass('special');
});
p:before {
content: "foo";
color: red;
cursor: pointer; } p.special:before {
content: "bar"; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p> <p>This is another paragraph.</p>

  • 장점: jQuery를 사용하여 구현이 용이함.한 번에 여러 스타일을 빠르게 변경할 수 있습니다.문제의 분리를 실시합니다(HTML에서 CSS와 JS를 분리).
  • 단점: CSS는 사전에 작성되어야 합니다.따라서 CSS의 내용은:before또는:after완전히 동적이지는 않다

2) 문서의 스타일시트에 직접 새로운 스타일 추가

JavaScript를 사용하여 다음을 포함하여 문서 스타일시트에 직접 스타일을 추가할 수 있습니다.:after그리고.:before스타일jQuery는 편리한 숏컷을 제공하지 않지만 다행히 JS는 그렇게 복잡하지 않습니다.

var str = "bar"; document.styleSheets[0].addRule('p.special:before','content: "'+str+'";'); 

var str = "bar"; document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');
p:before {
content: "foo";
color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p> <p>This is another paragraph</p>

.addRule() 그리고 관련 방법은 오늘날 상당히 잘 지원되고 있습니다.

변형으로서 jQuery를 사용하여 문서에 완전히 새로운 스타일시트를 추가할 수도 있지만 필요한 코드는 더 깔끔하지 않습니다.

var str = "bar"; $('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head'); 

var str = "bar"; $('<style>p.special:before{content:"' + str + '"}</style>').appendTo('head');
p:before {
content: "foo";
color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p> <p>This is another paragraph</p>

값을 추가하는 것뿐만 아니라 값을 “조작”하는 것에 대해서도 다른 접근 방식을 사용하여 기존 또는 스타일을 읽을 수 있습니다.

var str = window.getComputedStyle(document.querySelector('p'), ':before')
 .getPropertyValue('content'); 

var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content'); console.log(str);
document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');
p:before {
content:"foo";
color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p> <p>This is another paragraph</p>

교환이 가능합니다.document.querySelector('p')jQuery를 사용하는 경우 를 사용합니다.

  • 장점: 스타일에 어떤 문자열도 동적으로 삽입할 수 있습니다.
  • 단점: 원래 스타일은 변경되지 않고 덮어쓰기만 합니다.반복(남용)을 반복하면 DOM이 임의로 커질 수 있습니다.

3) 다른 DOM 속성 변경

CSS에서 를 사용하여 특정 DOM Atribute를 읽을 수도 있습니다.(브라우저가 를 서포트하고 있는 경우, 그 브라우저도 서포트하고 있습니다).이를 조합하여content:주의 깊게 준비된 CSS에서는, 다음의 내용을 변경할 수 있습니다(그러나 여백이나 색채등의 다른 속성은 변경할 수 없습니다).:before그리고.:after동적:

p:before {
content: attr(data-before);
color: red;
cursor: pointer; }

JS:

$('p').on('click', function () {
$(this).attr('data-before','bar'); }); 

$('p').on('click', function () {
$(this).attr('data-before','bar'); });
p:before {
content: attr(data-before);
color: red;
cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p> <p>This is another paragraph.</p>

이것은 CSS를 사전에 준비할 수 없는 경우 두 번째 기술과 조합할 수 있습니다.

var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');
$('p').on('click', function () {
$(this).attr('data-before', str); }); 

var str = "bar"; document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');
$('p').on('click', function() {
$(this).attr('data-before', str); });
p:before {
content: "foo";
color: red;
cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p> <p>This is another paragraph.</p>

  • 장점: 끝없는 추가 스타일을 만들지 않음
  • 단점: attrCSS에서는 콘텐츠 문자열에만 적용할 수 있으며 URL이나 RGB 색상은 적용할 수 없습니다.


CSS를 통해 브라우저에 의해 다른 실제 DOM 요소처럼 렌더링되지만 의사 요소 자체는 DOM의 일부가 아닙니다. 왜냐하면 의사 요소는 이름에서 알 수 있듯이 실제 요소가 아니기 때문입니다.따라서 jQuery(또는 Select도 마찬가지입니다)를 사용하여 직접 선택하고 조작할 수 없습니다.ors API).이는 스크립트를 사용하여 스타일을 수정하려는 의사 요소에 적용됩니다.::before그리고.::after.

실행 시 CSSOM을 통해 의사 요소 스타일에 직접 액세스할 수 있는 것은 실행 시뿐입니다.window.getComputedStyle())는, 다음의 jQuery에 의해서 공개되지 않습니다..css()유사 스레드도 지원하지 않는 메서드입니다.

단, 다음과 같은 다른 방법을 언제든지 찾을 수 있습니다.

  • 하나 이상의 임의의 클래스의 유사 요소에 스타일을 적용한 후 클래스 간에 전환(간단한 예시는 seucolega의 답변 참조) – 이는 단순한 셀렉터를 사용하여 요소와 요소 상태를 구분하기 위한 관용적인 방법입니다.

  • 문서 스타일시트를 변경함으로써 해당 의사 요소에 적용되는 스타일을 조작하는 것은 훨씬 해킹에 가깝다.



jQuery는 DOM의 일부가 아니기 때문에 유사 요소를 선택할 수 없습니다.단, 부모 요소에 특정 클래스를 추가하고 CSS에서 해당 유사 요소를 제어할 수 있습니다.

예

jQuery의 경우:

<script type="text/javascript">
$('span').addClass('change'); </script>

CSS의 경우:

span.change:after { content: 'bar' }


또한 의사 요소를 조작하기 위해 사용자 지정 속성(CSS 변수라고도 함)에 의존할 수 있습니다.사양에는 다음과 같은 내용이 기재되어 있습니다.

커스텀 속성은 일반적인 속성이기 때문에 모든 요소에 선언할 수 있으며, 일반 상속 규칙과 캐스케이드 규칙에 의해 해결되며, @media 및 기타 조건부 규칙에 조건부로 설정될 수 있으며, HTML 스타일 속성으로 사용할 수 있으며, CSSOM을 사용하여 읽거나 설정할 수 있습니다.

이를 고려하여 요소 내에서 커스텀 속성을 정의하고 의사 요소가 단순히 상속하므로 쉽게 수정할 수 있습니다.

1) 인라인 스타일 사용:

.box:before {
content:var(--content,"I am a before element");
color:var(--color, red);
font-size:25px; }
<div class="box"></div> <div class="box" style="--color:blue;--content:'I am a blue element'"></div> <div class="box" style="--color:black"></div> <div class="box" style="--color:#f0f;--content:'another element'"></div>

2) CSS 및 클래스 사용

.box:before {
content:var(--content,"I am a before element");
color:var(--color, red);
font-size:25px; }
.blue {
--color:blue;
--content:'I am a blue element'; } .black {
--color:black; }
<div class="box"></div> <div class="box black" ></div> <div class="box blue"></div>

3) Javascript 사용

document.querySelectorAll('.box')[0].style.setProperty("--color", "blue"); document.querySelectorAll('.box')[1].style.setProperty("--content", "'I am another element'");
.box:before {
content:var(--content,"I am a before element");
color:var(--color, red);
font-size:25px; }
<div class="box"></div> <div class="box"></div>

4) jQuery 사용

$('.box').eq(0).css("--color", "blue"); /* the css() function with custom properties works only with a jQuery vesion >= 3.x
with older version we can use style attribute to set the value. Simply pay
attention if you already have inline style defined!
*/ $('.box').eq(1).attr("style","--color:#f0f");
.box:before {
content:"I am a before element";
color:var(--color, red);
font-size:25px; }
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <div class="box"></div> <div class="box"></div> <div class="box"></div>

복잡한 값에도 사용할 수 있습니다.

.box {
--c:"content";
--b:linear-gradient(red,blue);
--s:20px;
--p:0 15px; }
.box:before {
content: var(--c);
background:var(--b);
color:#fff;
font-size: calc(2 * var(--s) + 5px);
padding:var(--p); }
<div class="box"></div>

구문을 검토하고 있는 것을 알 수 있습니다.var(--c,value)어디에value는 기본값이며 폴백 값이라고도 합니다.

동일한 사양에서 다음을 확인할 수 있습니다.

커스텀 속성 값은 var() 함수를 사용하여 다른 속성 값으로 대체할 수 있습니다.var()의 구문은 다음과 같습니다.

var() = var( <custom-property-name> [, <declaration-value> ]? )

함수의 첫 번째 인수는 대체할 사용자 지정 속성의 이름입니다.함수의 두 번째 인수(제공된 경우)는 폴백 값입니다.폴백 값은 참조된 커스텀속성이 비활성화되었을 때 대체 값으로 사용됩니다.

그리고 나중에:

속성 값에서 var()를 대체하려면:

  1. 의 첫 번째 인수에 의해 명명된 커스텀속성이var()기능은 애니메이션으로 재생됩니다.var()함수는 애니메이션 속성 또는 해당 수동 중 하나에서 사용되고 있습니다. 사용자 지정 속성은 이 알고리즘의 나머지 부분에 대한 초기 값을 가진 것으로 간주합니다.
  2. 첫 번째 인수에 의해 명명된 커스텀속성 값이var()함수는 초기값이 아닙니다.var()해당 사용자 지정 속성의 값에 따라 기능을 수행합니다.
  3. 그렇지 않으면var()함수의 두 번째 인수로 폴백 값이 있습니다.var()폴백 값으로 기능합니다.있다면var()참조를 대체한다.
  4. 그 이외의 경우,var()함수가 계산값 시간에 유효하지 않습니다.

커스텀 속성을 설정하지 않거나, 또는 로 설정하는 경우initial또는 잘못된 값을 포함하면 폴백 값이 사용됩니다.의 사용initial는 커스텀 속성을 기본값으로 리셋하는 경우에 도움이 됩니다.

관련된

CSS 변수(커스텀 속성이라고도 함) 내에 상속 값을 저장하려면 어떻게 해야 합니다.

박스 모델의 CSS 커스텀 속성(변수)