[javascript] jQuery를 사용하여 :: before 및 :: after와 같은 CSS 의사 요소 선택 및 조작

jQuery가 할 수있는 다른 모든 것에 대한 대답은 간단한 질문이라고 생각할 것입니다. 불행히도 문제는 기술적 인 문제로 귀결됩니다 . css : after 및 : before 규칙은 DOM의 일부가 아니므로 jQuery의 DOM 메소드를 사용하여 변경할 수 없습니다.

이 있습니다 자바 스크립트 및 / 또는 CSS 해결 방법을 사용하여 이러한 요소를 조작하는 방법; 사용하는 것은 정확한 요구 사항에 따라 다릅니다.

저는 “최고의”접근 방식으로 널리 간주되는 것으로 시작하겠습니다.

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

이 방법에서는, 당신은 이미 다른과의 CSS에서 클래스를 만들었습니다 :after또는 :before스타일. 이 “새”클래스를 나중에 스타일 시트에 배치하여 대체되도록하십시오.

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

그런 다음 jQuery (또는 바닐라 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로 쉽게 구현할 수 있습니다. 한 번에 여러 스타일을 빠르게 변경합니다. 우려 사항 분리 (CSS와 JS를 HTML에서 분리)
• 단점 : CSS는 미리 작성해야하므로 내용이 완전히 동적 :before이거나 :after그렇지 않다

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

그것은 포함하여 문서 스타일 시트에 직접 스타일을 추가 자바 스크립트를 사용하는 것이 가능 :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()관련 .insertRule()방법 은 오늘날 상당히 잘 지원됩니다.

변형으로, 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>

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

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>

약간 짧은 코드를 위해 jQuery document.querySelector('p')를 $('p')[0]사용할 때 바꿀 수 있습니다 .

• 장점 : 모든 문자열을 스타일에 동적으로 삽입 할 수 있습니다
• 단점 : 독창적 인 스타일은 변경되지 않고 재정의됩니다. 반복적으로 사용하면 DOM이 임의로 커질 수 있습니다.

3) 다른 DOM 속성 변경

당신은 또한 할 수 있습니다 사용 attr()하여 CSS에서 특정 DOM 속성을 읽을 수 있습니다. ( 브라우저가 지원하는 경우 :before, 그것은 지원 attr()뿐만 아니라. ) 이것을 결합하여 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>

• 장점 : 끝없는 추가 스타일을 만들지 않습니다 .
• 단점 : attr CSS에서 URL 또는 RGB 색상이 아닌 콘텐츠 문자열에만 적용 할 수 있습니다

답변

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

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

.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>

.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>

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>

$('.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>

$('head').append("<style>.span::after{ content:'bar' }</style>");

// Get the color value of .element:before
var color = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');