javascript(또는 jQuery) 사용 후 :: before 및 :: 등의 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 ★★★★★★★★★★★★★★★★★」:beforeJS는 복잡하지 않습니다.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() been ), jQuery been jQuery, 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()를 대체하려면:
- 이 " " " 의 첫 번째 인수로 명명된
var()기능에는 애니메이션이 있습니다.var()함수는 애니메이션 속성 또는 해당 수동 중 하나에서 사용되고 있습니다. 사용자 지정 속성은 이 알고리즘의 나머지 부분에 대한 초기 값을 가진 것으로 간주합니다.- 이 " " " 에 된
var(), function는 the the the the the the the the the the the the the를 .var()해당 사용자 지정 속성의 값에 따라 기능을 수행합니다.- 이외의 「」가
var()의 두 번째이 경우, 「폴백」을해 주세요.var()폴백 값으로 기능합니다.이var()조를대대 대대대다다- 이외의, 「」를 .
var()함수가 계산값 시간에 유효하지 않습니다.
않은 커스텀 을 「」로 합니다.initial또는 잘못된 값을 포함하면 폴백 값이 사용됩니다.「 」의 initial는 커스텀 속성을 기본값으로 리셋하는 경우에 도움이 됩니다.
관련된
CSS 변수(커스텀 속성이라고도 함) 내에 상속 값을 저장하려면 어떻게 해야 합니다.
Christian이 제안하는 바에 따라 다음과 같은 작업을 수행할 수도 있습니다.
$('head').append("<style>.span::after{ content:'bar' }</style>");
css에서 정의된 :after 및 :before 스타일속성에 액세스하는 방법은 다음과 같습니다.
// 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');
CSS를 통해 ::before 또는 :::after sudo 요소를 완전히 조작할 경우 JS를 사용할 수 있습니다.아래를 참조해 주세요.
jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');
「 」가 어떻게 있는지 해 주세요.<style>요소에는 ID가 있으며, 스타일을 동적으로 변경할 경우 ID를 제거하고 다시 추가할 수 있습니다.
이렇게 하면 JS의 도움을 받아 CSS를 통해 원하는 스타일을 원하는 대로 만들 수 있습니다.
한 가지 방법은 새 내용과 함께 문서에 규칙을 추가하고 클래스와 함께 참조하는 것입니다.필요한 항목에 따라 클래스의 콘텐츠 각 값에 대해 고유한 ID가 필요할 수 있습니다.
$("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head"));
$('span').addClass('id-after');
감사합니다! 저는 제가 원하는 것을 할 수 있었습니다:D http://jsfiddle.net/Tfc9j/42/ 여기 보세요.
외부 div의 불투명도를 내부 div의 불투명도와 다르게 하고 싶었기 때문에 클릭으로 변경해 주셨으면 합니다. 감사합니다.
$('#ena').on('click', function () {
$('head').append("<style>#ena:before { opacity:0.3; }</style>");
});
$('#duop').on('click', function (e) {
$('head').append("<style>#ena:before { opacity:0.8; }</style>");
e.stopPropagation();
});
#ena{
width:300px;
height:300px;
border:1px black solid;
position:relative;
}
#duo{
opacity:1;
position:absolute;
top:50px;
width:300px;
height:100px;
background-color:white;
}
#ena:before {
content: attr(data-before);
color: white;
cursor: pointer;
position: absolute;
background-color:red;
opacity:0.9;
width:100%;
height:100%;
}
<div id="ena">
<div id="duo">
<p>ena p</p>
<p id="duop">duoyyyyyyyyyyyyyy p</p>
</div>
</div>
HTML은 다음과 같습니다.
<div class="icon">
<span class="play">
::before
</span>
</div>
before은 'before'였습니다.content: "VERIFY TO WATCH";
다음은 jQuery의 두 줄입니다.jQuery는 특별히 이 요소를 참조하기 위해 클래스를 추가하고 스타일 태그(!important 태그 포함)를 추가하여 sudo-element 콘텐츠 값의 CSS를 변경합니다.
$("span.play:eq(0)").addClass('G');
$('body').append("<style>.G:before{content:'NewText' !important}</style>");
가짜 속성을 만들거나 기존 속성을 사용하여 의사 요소의 스타일시트에 상속할 수 있습니다.
var switched = false;
// Enable color switching
setInterval(function () {
var color = switched ? 'red' : 'darkred';
var element = document.getElementById('arrow');
element.style.backgroundColor = color;
// Managing pseudo-element's css
// using inheritance.
element.style.borderLeftColor = color;
switched = !switched;
}, 1000);.arrow {
/* SET FICTIONAL PROPERTY */
border-left-color:red;
background-color:red;
width:1em;
height:1em;
display:inline-block;
position:relative;
}
.arrow:after {
border-top:1em solid transparent;
border-right:1em solid transparent;
border-bottom:1em solid transparent;
border-left:1em solid transparent;
/* INHERIT PROPERTY */
border-left-color:inherit;
content:"";
width:0;
height:0;
position:absolute;
left:100%;
top:-50%;
}<span id="arrow" class="arrow"></span>「컨텐츠」프로퍼티에서는 동작하지 않는 것 같습니다.
이것은 실현 가능한 것의 예를 들려고 쓴 것이 아니기 때문에 실용적이지 않습니다.
css = {
before: function(elem,attr){
if($("#cust_style") !== undefined){
$("body").append("<style> " + elem + ":before {" + attr + "} </style>");
} else {
$("#cust_style").remove();
$("body").append("<style> " + elem + ":before {" + attr + "} </style>");
}
}, after: function(elem,attr){
if($("#cust_style") !== undefined){
$("body").append("<style> " + elem + ":after {" + attr + "} </style>");
} else { $("#cust_style").remove();
$("body").append("<style> " + elem + ":after {" + attr + "} </style>");
}
}
}
이 추가는 현재 / 또는 둘 다이며, 필요한 속성을 포함하는 Style 요소를 추가합니다. 이 속성은 대상 요소의 다음 Pseudo 요소에 적용됩니다.
이것은 로서 사용할 수 있다.
css.after("someElement"," content: 'Test'; position: 'absolute'; ") // editing / adding styles to :after
그리고.
css.before( ... ); // to affect the before pseudo element.
after: 및 before: 의사 요소는 DOM을 통해 직접 액세스할 수 없습니다.현재 css의 Specific 값을 자유롭게 편집할 수 없습니다.
나의 방법은 단지 예시일 뿐 연습에는 좋지 않습니다.여러분만의 트릭을 시험해보고 실제 사용법에 맞게 수정할 수 있습니다.
그러니까 이것과 다른 것들로 당신 자신의 실험을 하세요!
안부 - Adarsh Hegde.
저는 항상 저만의 utils 기능을 추가하고 있습니다.이렇게 되어 있습니다.
function setPseudoElContent(selector, value) {
document.styleSheets[0].addRule(selector, 'content: "' + value + '";');
}
setPseudoElContent('.class::after', 'Hello World!');
또는 ES6 기능을 활용합니다.
const setPseudoElContent = (selector, value) => {
document.styleSheets[0].addRule(selector, `content: "${value}";`);
}
setPseudoElContent('.class::after', 'Hello World!');
"Attribute"를 할 수 를 추가하는 입니까?style
$('head').append('<style>.span:after{ content:'changed content' }</style>')
에는 많은 , css의 하는 데 이 되는 .:before ★★★★★★★★★★★★★★★★★」:after츠미야
내가 제안하는 방법은 이렇다.HTML을 다음과 같이 가정해 보겠습니다.
<div id="something">Test</div>
다음으로 CSS에서 :before를 설정하고 다음과 같이 설계합니다.
#something:before{
content:"1st";
font-size:20px;
color:red;
}
#something{
content:'1st';
}
content나중에 쉽게 꺼낼 수 있도록 요소 자체에 속성을 지정합니다., 이제 ㅇㅇ, 있어요.button클릭하면 :before의 색상을 녹색으로, 글꼴 크기를 30px로 변경할 수 있습니다.이치노
합니다..activeS:
.activeS:before{
color:green !important;
font-size:30px !important;
}
이제 클래스를 다음과 같이 :before 요소에 추가하여 :before 스타일을 변경할 수 있습니다.
<button id="changeBefore">Change</button>
<script>
$('#changeBefore').click(function(){
$('#something').addClass('activeS');
});
</script>
만 알고 싶다면:before이치노
<button id="getContent">Get Content</button>
<script>
$('#getContent').click(function(){
console.log($('#something').css('content'));//will print '1st'
});
</script>
으로, 「」를 으로 변경하는 .:beforejQuery는 다음과 같습니다.
<button id="changeBefore">Change</button>
<script>
var newValue = '22';//coming from somewhere
var add = '<style>#something:before{content:"'+newValue+'"!important;}</style>';
$('#changeBefore').click(function(){
$('body').append(add);
});
</script>
하면 "changeBefore" 버튼이 변경됩니다.:before의 of의 #something22번입니다.
도움이 되었으면 좋겠다
이 용도로 내 플러그인을 사용할 수 있습니다.
JQuery:
(function() {
$.pseudoElements = {
length: 0
};
var setPseudoElement = function(parameters) {
if (typeof parameters.argument === 'object' || (parameters.argument !== undefined && parameters.property !== undefined)) {
for (var element of parameters.elements.get()) {
if (!element.pseudoElements) element.pseudoElements = {
styleSheet: null,
before: {
index: null,
properties: null
},
after: {
index: null,
properties: null
},
id: null
};
var selector = (function() {
if (element.pseudoElements.id !== null) {
if (Number(element.getAttribute('data-pe--id')) !== element.pseudoElements.id) element.setAttribute('data-pe--id', element.pseudoElements.id);
return '[data-pe--id="' + element.pseudoElements.id + '"]::' + parameters.pseudoElement;
} else {
var id = $.pseudoElements.length;
$.pseudoElements.length++
element.pseudoElements.id = id;
element.setAttribute('data-pe--id', id);
return '[data-pe--id="' + id + '"]::' + parameters.pseudoElement;
};
})();
if (!element.pseudoElements.styleSheet) {
if (document.styleSheets[0]) {
element.pseudoElements.styleSheet = document.styleSheets[0];
} else {
var styleSheet = document.createElement('style');
document.head.appendChild(styleSheet);
element.pseudoElements.styleSheet = styleSheet.sheet;
};
};
if (element.pseudoElements[parameters.pseudoElement].properties && element.pseudoElements[parameters.pseudoElement].index) {
element.pseudoElements.styleSheet.deleteRule(element.pseudoElements[parameters.pseudoElement].index);
};
if (typeof parameters.argument === 'object') {
parameters.argument = $.extend({}, parameters.argument);
if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {
var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length;
element.pseudoElements[parameters.pseudoElement].index = newIndex;
element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;
};
var properties = '';
for (var property in parameters.argument) {
if (typeof parameters.argument[property] === 'function')
element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property]();
else
element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];
};
for (var property in element.pseudoElements[parameters.pseudoElement].properties) {
properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
};
element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);
} else if (parameters.argument !== undefined && parameters.property !== undefined) {
if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {
var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length;
element.pseudoElements[parameters.pseudoElement].index = newIndex;
element.pseudoElements[parameters.pseudoElement].properties = {};
};
if (typeof parameters.property === 'function')
element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property();
else
element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property;
var properties = '';
for (var property in element.pseudoElements[parameters.pseudoElement].properties) {
properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
};
element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);
};
};
return $(parameters.elements);
} else if (parameters.argument !== undefined && parameters.property === undefined) {
var element = $(parameters.elements).get(0);
var windowStyle = window.getComputedStyle(
element, '::' + parameters.pseudoElement
).getPropertyValue(parameters.argument);
if (element.pseudoElements) {
return $(parameters.elements).get(0).pseudoElements[parameters.pseudoElement].properties[parameters.argument] || windowStyle;
} else {
return windowStyle || null;
};
} else {
console.error('Invalid values!');
return false;
};
};
$.fn.cssBefore = function(argument, property) {
return setPseudoElement({
elements: this,
pseudoElement: 'before',
argument: argument,
property: property
});
};
$.fn.cssAfter = function(argument, property) {
return setPseudoElement({
elements: this,
pseudoElement: 'after',
argument: argument,
property: property
});
};
})();
$(function() {
$('.element').cssBefore('content', '"New before!"');
});.element {
width: 480px;
margin: 0 auto;
border: 2px solid red;
}
.element::before {
content: 'Old before!';
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="element"></div>값은 jQuery.css의 일반 함수와 같이 지정해야 합니다.
또한 jQuery.css의 일반 함수에서와 같이 pseudo-element 파라미터의 값도 얻을 수 있습니다.
console.log( $(element).cssBefore(parameter) );
JS:
(function() {
document.pseudoElements = {
length: 0
};
var setPseudoElement = function(parameters) {
if (typeof parameters.argument === 'object' || (parameters.argument !== undefined && parameters.property !== undefined)) {
if (!parameters.element.pseudoElements) parameters.element.pseudoElements = {
styleSheet: null,
before: {
index: null,
properties: null
},
after: {
index: null,
properties: null
},
id: null
};
var selector = (function() {
if (parameters.element.pseudoElements.id !== null) {
if (Number(parameters.element.getAttribute('data-pe--id')) !== parameters.element.pseudoElements.id) parameters.element.setAttribute('data-pe--id', parameters.element.pseudoElements.id);
return '[data-pe--id="' + parameters.element.pseudoElements.id + '"]::' + parameters.pseudoElement;
} else {
var id = document.pseudoElements.length;
document.pseudoElements.length++
parameters.element.pseudoElements.id = id;
parameters.element.setAttribute('data-pe--id', id);
return '[data-pe--id="' + id + '"]::' + parameters.pseudoElement;
};
})();
if (!parameters.element.pseudoElements.styleSheet) {
if (document.styleSheets[0]) {
parameters.element.pseudoElements.styleSheet = document.styleSheets[0];
} else {
var styleSheet = document.createElement('style');
document.head.appendChild(styleSheet);
parameters.element.pseudoElements.styleSheet = styleSheet.sheet;
};
};
if (parameters.element.pseudoElements[parameters.pseudoElement].properties && parameters.element.pseudoElements[parameters.pseudoElement].index) {
parameters.element.pseudoElements.styleSheet.deleteRule(parameters.element.pseudoElements[parameters.pseudoElement].index);
};
if (typeof parameters.argument === 'object') {
parameters.argument = (function() {
var cloneObject = typeof parameters.argument.pop === 'function' ? [] : {};
for (var property in parameters.argument) {
cloneObject[property] = parameters.argument[property];
};
return cloneObject;
})();
if (!parameters.element.pseudoElements[parameters.pseudoElement].properties && !parameters.element.pseudoElements[parameters.pseudoElement].index) {
var newIndex = parameters.element.pseudoElements.styleSheet.rules.length || parameters.element.pseudoElements.styleSheet.cssRules.length || parameters.element.pseudoElements.styleSheet.length;
parameters.element.pseudoElements[parameters.pseudoElement].index = newIndex;
parameters.element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;
};
var properties = '';
for (var property in parameters.argument) {
if (typeof parameters.argument[property] === 'function')
parameters.element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property]();
else
parameters.element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];
};
for (var property in parameters.element.pseudoElements[parameters.pseudoElement].properties) {
properties += property + ': ' + parameters.element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
};
parameters.element.pseudoElements.styleSheet.addRule(selector, properties, parameters.element.pseudoElements[parameters.pseudoElement].index);
} else if (parameters.argument !== undefined && parameters.property !== undefined) {
if (!parameters.element.pseudoElements[parameters.pseudoElement].properties && !parameters.element.pseudoElements[parameters.pseudoElement].index) {
var newIndex = parameters.element.pseudoElements.styleSheet.rules.length || parameters.element.pseudoElements.styleSheet.cssRules.length || parameters.element.pseudoElements.styleSheet.length;
parameters.element.pseudoElements[parameters.pseudoElement].index = newIndex;
parameters.element.pseudoElements[parameters.pseudoElement].properties = {};
};
if (typeof parameters.property === 'function')
parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property();
else
parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property;
var properties = '';
for (var property in parameters.element.pseudoElements[parameters.pseudoElement].properties) {
properties += property + ': ' + parameters.element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
};
parameters.element.pseudoElements.styleSheet.addRule(selector, properties, parameters.element.pseudoElements[parameters.pseudoElement].index);
};
} else if (parameters.argument !== undefined && parameters.property === undefined) {
var windowStyle = window.getComputedStyle(
parameters.element, '::' + parameters.pseudoElement
).getPropertyValue(parameters.argument);
if (parameters.element.pseudoElements) {
return parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] || windowStyle;
} else {
return windowStyle || null;
};
} else {
console.error('Invalid values!');
return false;
};
};
Object.defineProperty(Element.prototype, 'styleBefore', {
enumerable: false,
value: function(argument, property) {
return setPseudoElement({
element: this,
pseudoElement: 'before',
argument: argument,
property: property
});
}
});
Object.defineProperty(Element.prototype, 'styleAfter', {
enumerable: false,
value: function(argument, property) {
return setPseudoElement({
element: this,
pseudoElement: 'after',
argument: argument,
property: property
});
}
});
})();
document.querySelector('.element').styleBefore('content', '"New before!"');.element {
width: 480px;
margin: 0 auto;
border: 2px solid red;
}
.element::before {
content: 'Old before!';
}<div class="element"></div>GitHub: https://github.com/yuri-spivak/managing-the-properties-of-pseudo-elements/
하였습니다.를 들어, jQuery는 css-pseudo 합니다..css()특정 요소에 대한 것입니다.
사용방법:
$('body')
.css({
backgroundColor: 'white'
})
.cssPseudo('after', {
content: 'attr(title) ", you should try to hover the picture, then click it."',
position: 'absolute',
top: 20, left: 20
})
.cssPseudo('hover:after', {
content: '"Now hover the picture, then click it!"'
});
$('.span').attr('data-txt', 'foo');
$('.span').click(function () {
$(this).attr('data-txt',"any other text");
}).span{
}
.span:after{
content: attr(data-txt);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='span'></div>다른 사용자가 풀 스타일 요소로 헤드 요소를 추가하는 것에 대해 코멘트를 했습니다.한 번만 리셋을 하면 나쁘지 않지만 여러 번 리셋해야 한다면 많은 스타일 요소로 끝납니다.그래서 id로 머릿속에 빈 스타일 요소를 만들고 inner를 바꿉니다.HTML은 다음과 같습니다.
<style id="pseudo"></style>
그러면 JavaScript는 다음과 같습니다.
var pseudo = document.getElementById("pseudo");
function setHeight() {
let height = document.getElementById("container").clientHeight;
pseudo.innerHTML = `.class:before { height: ${height}px; }`
}
setHeight()
다른 했습니다. 하여 이 요소를 할 수 있습니다.setHeight() 크기가 마다 창 크기가 조정되어 창 될 마다 창 크기가 조정됩니다.<style>★★★★★★★★★★★★★★★★★★.
같은 일을 하려다 막혔던 사람에게 도움이 됐으면 좋겠다.
내부에 정의된 변수를 활용했습니다.CSS:after도 마찬가지입니다.:before) 의사 패킷(특히, Pseudo-Precision)을 변경하기 위해background-color 값anchor에 정의하다.sliding-middle-out:hover:after 및content ''의 값''에 값anchor )#reference다음 데모에서는 JavaScript/jQuery를 사용하여 랜덤 색상을 생성합니다.
HTML
<a href="#" id="changeColor" class="sliding-middle-out" title="Generate a random color">Change link color</a>
<span id="log"></span>
<h6>
<a href="https://stackoverflow.com/a/52360188/2149425" id="reference" class="sliding-middle-out" target="_blank" title="Stack Overflow topic">Reference</a>
</h6>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/davidmerfield/randomColor/master/randomColor.js"></script>
CSS
:root {
--anchorsFg: #0DAFA4;
}
a, a:visited, a:focus, a:active {
text-decoration: none;
color: var(--anchorsFg);
outline: 0;
font-style: italic;
-webkit-transition: color 250ms ease-in-out;
-moz-transition: color 250ms ease-in-out;
-ms-transition: color 250ms ease-in-out;
-o-transition: color 250ms ease-in-out;
transition: color 250ms ease-in-out;
}
.sliding-middle-out {
display: inline-block;
position: relative;
padding-bottom: 1px;
}
.sliding-middle-out:after {
content: '';
display: block;
margin: auto;
height: 1px;
width: 0px;
background-color: transparent;
-webkit-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
-moz-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
-ms-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
-o-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
}
.sliding-middle-out:hover:after {
width: 100%;
background-color: var(--anchorsFg);
outline: 0;
}
#reference {
margin-top: 20px;
}
.sliding-middle-out:before {
content: attr(data-content);
display: attr(data-display);
}
JS/jQuery
var anchorsFg = randomColor();
$( ".sliding-middle-out" ).hover(function(){
$( ":root" ).css({"--anchorsFg" : anchorsFg});
});
$( "#reference" ).hover(
function(){
$(this).attr("data-content", "Hello World!").attr("data-display", "block").html("");
},
function(){
$(this).attr("data-content", "Reference").attr("data-display", "inline").html("");
}
);
처음으로 모든 답을 읽기 전에 내 답을 읽지는 않을 때, 그래서 나는 이것이 나를 괴롭히지 않기를 바란다.
제 경우, 이것은 아이콘에 부착되어 있는 경우에 필요했습니다.a,div ★★★★★★★★★★★★★★★★★」button조금 했습니다.<i class="icon-class"></i>그그 since since since 때문에icon-class업을듣듣 듣듣듣다다" " " class="icon-class"가가진망
'아'를 붙였습니다.data-icon의 element::before { content: "HERE" }그리고 이 꽤 간단한 자바스크립트가 나머지를 처리했다.
{
const fakeIcons = document.querySelectorAll('[data-icon]')
for (const iconElement of fakeIcons) {
const fakeClass = 'fake-' + Array.from(Array(20), () => Math.floor(Math.random() * 36).toString(36)).join('')
const beforeContent = iconElement.getAttribute('data-icon')
iconElement.classList.add(fakeClass)
const style = document.createElement('style')
style.type = 'text/css'
style.innerHTML = `
.${fakeClass}::before {
content: "${beforeContent}" !important;
}
`
document.getElementsByTagName('head')[0].appendChild(style)
}
}
코드 설명:
- Atribute(Atribute)를 모든 합니다.
data-icon) - 그들을 통과하다.
- 로
fake-그 문자열이 . data-icon- 랜덤으로 생성된 클래스를 요소에 추가하다
- 를
::beforevalue 。 - 에
<head>HTML 소요
다음 솔루션은 javascript attr 속성을 사용하여 의사 요소를 업데이트하는 방법을 보여줍니다.
HTML에서 속성을 추가합니다.이 속성은 javascript에서 setAttribute를 사용하여 조작할 수 있습니다.
<div
id="inputBoxParent"
count="0">
...
</div>
js로 업데이트
inputBoxParent.setAttribute('count', value.length)
CSS - 유사 요소에서 콘텐츠를 attr(attributeName)로 추가합니다.
.input-box-container::after{
content: attr(count);
}
이것으로 끝!!!
const inputBoxParent = document.getElementById("inputBoxParent");
const handleOnChange = (value) => {
inputBoxParent.setAttribute('count', value.length)
}.input-box-container {
position: relative;
width: 200px;
}
.input-box-container::after{
position: absolute;
bottom: 8px;
right: 10px;
height: 10px;
width: 20px;
content: attr(count);
}<h4> Type some text inside the box and click outside to see resule i.e. pseudo element content change</h4>
<div
id="inputBoxParent"
class="input-box-container"
count="0">
<input
type="text"
id="inputBox"
placeholder="type some thing"
onchange="handleOnChange(this.value)"
onkeyup="handleOnChange(this.value)"
/>
</div>쉽고 효과적인 다른 것을 준비했습니다.
<style>
.case-after:after { // set your properties here like eg:
color:#3fd309 !important;
}
.case-before:before { // set your properties here like eg:
color:#151715 !important;
}
</style>
// case for after
$('#button-id').on('click', function() {
$(".target-div").toggleClass('case-after');
});
// case for before
$('#button-id').on('click', function() {
$(".target-div").toggleClass('case-before');
});
상속 스타일을 가지려면 이전 또는 이후 의사 설정을 한 후 Javascript를 사용하여 부모 스타일을 설정하십시오.
예를 들어, :before의 색상 스타일을 변경하고 나서, 다음과 같이 설정합니다.
.my-style::before{
color: inherit;
}
그런 다음 javascript를 사용하여 .my-style 요소의 색상 스타일을 변경합니다.
document.querySelector(".my-style").style.color = red;
작업 완료, 매우 단순함
언급URL : https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin
'source' 카테고리의 다른 글
| 풀 URL 사용 시 PHP file_get_contents가 매우 느리다 (0) | 2022.11.19 |
|---|---|
| 휴지 상태 주석 - 필드 액세스와 속성 액세스 중 어느 쪽이 더 좋습니까? (0) | 2022.11.19 |
| LIMIT 오프셋에서 MySQL 함수를 사용할 수 있습니까? (0) | 2022.11.18 |
| MySQL이 0을 유효한 자동 증분 값으로 사용하도록 강제하는 방법 (0) | 2022.11.18 |
| 배열의 마지막 항목 가져오기 (0) | 2022.11.18 |