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 색상이 아닌 콘텐츠 문자열에만 적용 할 수 있습니다