복붙노트

[JQUERY] 선택 및 이전 등 :: CSS 의사 요소를 조작하고 :: jQuery를 사용 후

JQUERY

선택 및 이전 등 :: CSS 의사 요소를 조작하고 :: jQuery를 사용 후

해결법

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

    또한 데이터 속성과 의사 요소에 내용을 전달하고 그 조작 할 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';
}

  2. 2.이 jQuery를 할 수있는 다른 모든 것들과 함께, 대답 간단한 질문이 될 것 같아. CSS : 불행하게도, 문제는 기술적 인 문제로 귀결 후 : 규칙 때문에 DOM에 포함되지 않으며, 전에 jQuery의 DOM 방법을 사용하여 변경할 수 없습니다.

    이 jQuery를 할 수있는 다른 모든 것들과 함께, 대답 간단한 질문이 될 것 같아. CSS : 불행하게도, 문제는 기술적 인 문제로 귀결 후 : 규칙 때문에 DOM에 포함되지 않으며, 전에 jQuery의 DOM 방법을 사용하여 변경할 수 없습니다.

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

    나는 널리 "최고"접근 방식 간주 무엇을 시작하는거야 :

    이 방법에서는, 당신은 이미 다른과의 CSS에서 클래스를 만들었습니다 : 후 나 : 스타일 전에. 확인이 우선하기 위해 스타일 시트의 뒷부분이 "새로운"클래스를 장소 :

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

    그럼 당신은 쉽게 추가하거나 jQuery를 (또는 바닐라 JavaScript)를 사용하여이 클래스를 제거 할 수 있습니다 :

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

    $ ( 'P'). (함수를 '클릭'에 () { $ (이) .toggleClass ( '특별한'); }); P : 전에 { 내용 : "foo는"; 색상 : 빨강; 커서 : 포인터; } p.special : 전에 { 내용 : "바"; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

    이 단락된다.

    이 다른 제이다.

    후 : 스타일 전에 포함, 문서 스타일 시트에 직접 스타일을 추가 자바 스크립트를 사용 가능합니다. jQuery를 편리한 바로 가기를 제공하지 않지만, 다행히 JS는 복잡하지됩니다 :

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

    var에 STR = "바"; document.styleSheets [0] .addRule ( 'p.special : 전 ","콘텐츠 "'+ STR + '' ''); P : 전에 { 내용 : "foo는"; 색상 : 빨강; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

    이 단락은

    이 다른 문단

    .addRule () 및 관련 .insertRule () 메소드는 오늘 상당히 잘 지원되지 않습니다.

    변형으로, 당신은 또한 문서에 완전히 새로운 스타일 시트를 추가 할 jQuery를 사용할 수 있지만, 필요한 코드는 청소기되지 않습니다 :

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

    var에 STR = "바"; . $ ( '<스타일> p.special : {내용 전 : "'+ STR + '"} ') appendTo ( '머리'); P : 전에 { 내용 : "foo는"; 색상 : 빨강; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

    이 단락은

    이 다른 문단

    우리가 값 "을 조작하는 것은"단지 그들에 추가하지, 우리는 또한 읽을 수에 대해 이야기하는 경우 기존 : 후 나 : 다른 접근 방법을 사용하여 스타일 전에 :

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

    VAR STR = window.getComputedStyle ($ ( "P") [0], '이전'). getPropertyValue ( '콘텐츠'); CONSOLE.LOG (STR); document.styleSheets [0] .addRule ( 'p.special : 전 ","콘텐츠 "'+ STR + STR + '' ''); P : 전에 { 내용 : "foo는"; 색상 : 빨강; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

    이 단락은

    이 다른 문단

    우리는 $로 ( 'P')를 document.querySelector ( 'P')을 대체 할 수 [0] 약간 짧은 코드, jQuery를 사용하는 경우.

    또한 특정 DOM 속성을 읽을 수 있도록 CSS에서 () ATTR 사용할 수 있습니다. (브라우저가 지원하는 경우 : 전에, 그것은뿐만 아니라 ATTR ()를 지원합니다.) 함량이 결합하여 : 일부 신중하게 준비된 CSS, 우리는 (마진 또는 색상 등이 아닌 다른 속성)의 내용을 변경할 수의 : 전 : 동적 후 :

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

    JS :

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

    $ ( 'P'). (함수를 '클릭'에 () { $ (이) .attr ( '데이터 전', '바'); }); P : 전에 { 함량 ATTR (이전 데이터); 색상 : 빨강; 커서 : 포인터; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

    이 단락된다.

    이 다른 제이다.

    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 = "바"; document.styleSheets [0] .addRule (P ': 전', '콘텐츠! ATTR (데이터) 전에 중요한' '); $ ( 'P'). (함수를 '클릭'에 () { $ (이) .attr (캐릭터, '데이터 이전'); }); P : 전에 { 내용 : "foo는"; 색상 : 빨강; 커서 : 포인터; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

    이 단락된다.

    이 다른 제이다.

  3. 3.그들은 다른 실제 DOM 요소, 같은 것처럼 그들은 CSS를 통해 브라우저에서 의사 요소를 렌더링하고 있지만 이름에서 알 수 있듯이 의사 요소, 실제 요소가 없기 때문에 자신은 DOM의 일부가 아니며, 따라서 당신은 할 수 없습니다 선택하고 (그 문제에,조차 선택기의 API 또는 자바 스크립트 API)를 jQuery를 함께 직접 조작 할 수 있습니다. 이것은 누구의 스타일 당신이 스크립트를 수정하려고하고 있으며,뿐만 아니라 :: 전 :: 후 어떤 의사 요소에 적용됩니다.

    그들은 다른 실제 DOM 요소, 같은 것처럼 그들은 CSS를 통해 브라우저에서 의사 요소를 렌더링하고 있지만 이름에서 알 수 있듯이 의사 요소, 실제 요소가 없기 때문에 자신은 DOM의 일부가 아니며, 따라서 당신은 할 수 없습니다 선택하고 (그 문제에,조차 선택기의 API 또는 자바 스크립트 API)를 jQuery를 함께 직접 조작 할 수 있습니다. 이것은 누구의 스타일 당신이 스크립트를 수정하려고하고 있으며,뿐만 아니라 :: 전 :: 후 어떤 의사 요소에 적용됩니다.

    사용자가 직접 CSSOM을 통해 런타임에 전용 액세스 의사 요소 스타일을 (생각 window.getComputedStyle ()) 할 수 있습니다 .CSS를 넘어 jQuery를에 의해 노출되지 않는 (), 중 의사 요소를 지원하지 않는 방법.

    당신은 항상 예를 ​​들어 주위 다른 방법으로,하지만를 찾을 수 있습니다 :

  4. 4.그들은 DOM의 일부가 아닌 때문에 jQuery를에 의사 요소를 선택할 수 없습니다. 하지만 당신은 아버지 요소에 특정 클래스를 추가하고 CSS에서의 의사 요소를 제어 할 수 있습니다.

    그들은 DOM의 일부가 아닌 때문에 jQuery를에 의사 요소를 선택할 수 없습니다. 하지만 당신은 아버지 요소에 특정 클래스를 추가하고 CSS에서의 의사 요소를 제어 할 수 있습니다.

    예

    jQuery를에 :

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

    CSS에서 :

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

  5. 5.우리는 또한 의사 요소를 조작하기 위해 사용자 지정 속성 (일명 CSS 변수)에 의존 할 수 있습니다. 우리는 사양 점에서 읽을 수 있습니다 :

    우리는 또한 의사 요소를 조작하기 위해 사용자 지정 속성 (일명 CSS 변수)에 의존 할 수 있습니다. 우리는 사양 점에서 읽을 수 있습니다 :

    이 고려 아이디어는 요소와 간단하게 상속 의사 요소 내의 사용자 지정 속성을 정의하는 것입니다; 따라서 우리는 쉽게 수정할 수 있습니다.

    1) 인라인 스타일을 사용 :

    .box : 전에 { 내용 : VAR (- 내용, "나는 요소 전입니다"); 색상 : VAR (- 색, 빨간색); 폰트 크기 : 25 픽셀; }

    2) CSS 및 클래스를 사용하여

    .box : 전에 { 내용 : VAR (- 내용, "나는 요소 전입니다"); 색상 : VAR (- 색, 빨간색); 폰트 크기 : 25 픽셀; } .푸른 { --파란색; --content : '나는 파란색 요소입니다'; } 까만 { --검정색; }

    3)를 사용하여 자바 스크립트

    document.querySelectorAll ( '박스.') [0] .style.setProperty ( "- 색", "청색"); document.querySelectorAll ( '상자.') [1] .style.setProperty ( "- 내용", " '나는 다른 요소입니다'"); .box : 전에 { 내용 : VAR (- 내용, "나는 요소 전입니다"); 색상 : VAR (- 색, 빨간색); 폰트 크기 : 25 픽셀; }

    4) jQuery를 사용

    $ ( '. 상자') EQ (0) .CSS ( "- 컬러", "블루."); / * 사용자 정의 특성과 CSS () 함수는 jQuery를 vesion> = 3.X에서만 작동 이전 버전과 함께 우리는 값을 설정하는 스타일 속성을 사용할 수 있습니다. 간단하게 지불 이미 인라인 스타일을 정의한 경우주의! * / $ ( '. 상자') EQ (1) .attr ( "스타일", "- 색상 : #의 f0f");. .box : 전에 { 내용 : "나는 요소 전에 오전"; 색상 : VAR (- 색, 빨간색); 폰트 크기 : 25 픽셀; } <스크립트 SRC = "https://code.jquery.com/jquery-3.3.1.min.js">

    또한 복잡한 값을 사용할 수 있습니다 :

    .box { --C : "내용"; --b : 선형 구배 (빨강, 파랑); --S : 20 픽셀; --p : 0 15 픽셀을; } .box : 전에 { 내용 : VAR (- C); 배경 : VAR (- B) 색상 : #fff; 폰트 크기 : 계산치 (2 * VAR (- S) + 5px); 패딩 : VAR (- P); }

    (- C, 값) 값은 기본값이며, 또한 대체 값이라고 당신은 내가 구문 VAR을 고려하고 있음을 알 수 있습니다.

    같은 사양에서 우리는 읽을 수 있습니다 :

    그리고 나중에 :

    우리는 사용자 정의 속성을 설정하지 마십시오 우리는 초기에 또는 그 다음 대체 값이 사용됩니다 잘못된 값이 포함 설정합니다. 초기의 사용은 우리가 기본값으로 사용자 지정 속성을 재설정 할 경우에 도움이 될 수 있습니다.

    관련

    어떻게 (CSS 변수 일명)는 CSS 사용자 정의 특성 내부 상속 값을 저장하는 방법?

    박스 모델에 대한 CSS 사용자 지정 속성 (변수)

    https://caniuse.com/#feat=css-variables : 그 CSS 변수 (예를 들어, IE 11)은 관련 고려 모든 브라우저에서 지원되지 않을 수 있습니다

  6. 6.기독교는 제안 일의 라인에서, 당신은 또한 할 수 :

    기독교는 제안 일의 라인에서, 당신은 또한 할 수 :

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

  7. 7.여기에 액세스하는 방법은 다음과 같습니다 후 : 스타일 속성 전에, CSS에 정의 :

    여기에 액세스하는 방법은 다음과 같습니다 후 : 스타일 속성 전에, CSS에 정의 :

    // 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');

  8. 8.당신이 조작 할 경우 또는 :: 완전히 CSS를 통해 의사 요소 후, 당신이 할 수 있기 전에 : 그것은 JS. 아래를 참조;

    당신이 조작 할 경우 또는 :: 완전히 CSS를 통해 의사 요소 후, 당신이 할 수 있기 전에 : 그것은 JS. 아래를 참조;

    jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');

    공지 사항의 <스타일> 요소는 스타일이 동적으로 변경하는 경우 다시로하고 APPEND를 제거하는 데 사용할 수있는 ID를 가지고하는 방법.

    이 방법은, 당신의 요소는 JS의 도움으로, CSS를 통해 정확히 원하는 스타일입니다.

  9. 9.하나의 작업하지만 매우 효율적인 방법은 새로운 콘텐츠와 문서에 규칙을 추가하고 클래스를 참조하는 것입니다. 필요한 사항에 따라 클래스는 내용의 각 값에 대한 고유 ID를해야 할 수도 있습니다.

    하나의 작업하지만 매우 효율적인 방법은 새로운 콘텐츠와 문서에 규칙을 추가하고 클래스를 참조하는 것입니다. 필요한 사항에 따라 클래스는 내용의 각 값에 대한 고유 ID를해야 할 수도 있습니다.

    $("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head"));
$('span').addClass('id-after');

  10. 10.여기에 HTML은 다음과 같습니다

    여기에 HTML은 다음과 같습니다

    <div class="icon">
  <span class="play">
    ::before
  </span>
</div>

    에 스타일을 계산 된 '전에'입니다 내용 : "TO WATCH 확인";

    여기에 구체적으로이 요소를 참조하려면 별도의 클래스를 추가 한 다음 스타일 태그를 추가하는 아이디어 사용 jQuery를 내 두 줄입니다 변경에 sudo는 요소의 내용 값의 CSS는 (AN로를 중요한 태그!)

    $ ( "span.play:eq(0)").addClass('G ');

    . $ ( '몸') APPEND ( "<스타일> · G : 전 {내용 :! '를 newText'중요한} ");

  11. 11.다들 감사 해요! 나는 내가 원하는 것을 할 관리 : D를 http://jsfiddle.net/Tfc9j/42/ 여기 좀 봐

    다들 감사 해요! 나는 내가 원하는 것을 할 관리 : D를 http://jsfiddle.net/Tfc9j/42/ 여기 좀 봐

    난 내부 DIV 및 클릭 somwewhere와 그 변화의 불투명도 다르게 외부 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>

  12. 12.당신은 가짜 속성을 만들거나 기존의 것을 사용하고 의사 요소의 스타일에서 상속 할 수 있습니다.

    당신은 가짜 속성을 만들거나 기존의 것을 사용하고 의사 요소의 스타일에서 상속 할 수 있습니다.

    VAR은 = 거짓 스위치; // 색상 전환 사용 하여 setInterval (함수 () { VAR 컬러 = 전환? 'darkred', '빨간색' VAR 소자 ( '화살표')를 document.getElementById를 =; element.style.backgroundColor는 컬러 =; // 의사 요소의 CSS 관리 // 상속을 사용. element.style.borderLeftColor는 컬러 =; ! = 전환 스위치; } 1000); {.arrow / * SET 허구 재산 * / 테두리 왼쪽-색상 : 빨강; 배경 색상 : 레드, 폭 : 1em; 높이 : 1em; 표시 : 인라인 블록; 위치 : 상대; } .arrow : 후 { 국경 정상 : 1em 투명 고체; 국경 오른쪽 : 1em 고체 투명; 국경 - 하단 : 1em 투명 고체; 국경 왼쪽 : 1em 고체 투명; / * INHERIT 재산 * / 테두리 왼쪽-색상 : 상속을; 함유량:""; 폭 : 0; 키 : 0; 위치 : 절대; 왼쪽 : 100 %; 위 : -50 %를; } <스팬 이드 = "화살표"클래스 "화살표"=>

    "내용"속성에 대한 작업을하지 않는 것 같다 :(

  13. 13.내가, 실제 사용이를 작성하지 않은 당신을 달성 할 수 있는지의 예를 제공 이것은 실용적이지 않다.

    내가, 실제 사용이를 작성하지 않은 당신을 달성 할 수 있는지의 예를 제공 이것은 실용적이지 않다.

    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>"); 
}
}
}

    이것은 현재의 a를 / 또는 대상 요소의 후 의사 요소에 영향을 걸릴 것이다 필요한 속성의 포함 된 스타일 요소를 추가합니다.

    이것은로 사용할 수 있습니다

    css.after("someElement"," content: 'Test'; position: 'absolute'; ") // editing / adding styles to :after

    과

    css.before( ... ); // to affect the before pseudo element.

    및 이전 : 이후로 요소를 DOM을 통해 직접 액세스 할 수없는 의사 그것은 CSS의 특정 값을 자유롭게 현재 편집 할 수 없습니다.

    내 방법은 단지 예를 실천에 대한 좋지 않은했다, 당신은 당신의 자신의 몇 가지 트릭을 시도하고 실제 사용에 대한 정정하게 수정할 수 있습니다.

    그래서이 다른 사람과 자신의 실험의 해!

    안부 - ADARSH Hegde.

  14. 14.난 항상 다음과 같습니다 내 자신의 유틸 기능을 추가 해요.

    난 항상 다음과 같습니다 내 자신의 유틸 기능을 추가 해요.

    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!');

  15. 15.클래스 나 속성을 추가 왜 그냥 머리에 스타일을 추가 할 수 있습니다 때

    클래스 나 속성을 추가 왜 그냥 머리에 스타일을 추가 할 수 있습니다 때

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

  16. 16.이 여기에 많은 대답은하지만 대답은의 CSS를 조작하는 데 도움이 없습니다 : 전이나 : 후,조차 허용 한.

    이 여기에 많은 대답은하지만 대답은의 CSS를 조작하는 데 도움이 없습니다 : 전이나 : 후,조차 허용 한.

    여기에 내가 그것을 할 것을 제안하는 방법이다. 당신의 HTML이 비슷 가정하자 :

    <div id="something">Test</div>

    CSS에 전에처럼 설계 : 그리고 당신은 자신을 설정하는 :

    #something:before{
   content:"1st";
   font-size:20px;
   color:red;
}
#something{
  content:'1st';
}

    나는 또한 당신이 나중에 쉽게 꺼낼 수 있도록 요소 자체 콘텐츠 속성을 설정주의하시기 바랍니다. 녹색과 30 픽셀과의 글꼴 크기에 전에 : 지금, 당신은의 색상을 변경하고자하는 버튼 클릭이있다. 다음과 같이 그것을 달성 할 수있다 :

    일부 클래스 .activeS에 원하시는 요구와 CSS를 정의합니다 :

    .activeS:before{
   color:green !important;
   font-size:30px !important;
 }

    지금 당신은 변경할 수 있습니다 스타일 전에에 클래스를 추가하여 : 요소 앞에 다음과 같습니다 :

    <button id="changeBefore">Change</button>
<script>
    $('#changeBefore').click(function(){
        $('#something').addClass('activeS');
    });
</script>

    당신은 단지의 콘텐츠를하려면 : 전에, 그것은으로 수행 할 수 있습니다 :

    <button id="getContent">Get Content</button>
<script>
    $('#getContent').click(function(){
        console.log($('#something').css('content'));//will print '1st'
    });
</script>

    당신이 동적으로 변화하려는 궁극적 경우 다음과 같이 jQuery를하여 콘텐츠를하기 전에, 당신은 그것을 얻을 수 있습니다 :

    <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"버튼 위에 클릭하면 변경할 것이다 동적 인 값을 '22'로 #something 함량 전에.

    나는 그것이 도움이되기를 바랍니다

  17. 17.이 목적을 위해 내 플러그인을 사용할 수 있습니다.

    이 목적을 위해 내 플러그인을 사용할 수 있습니다.

    JQuery와 :

    (함수() { $ .pseudoElements = { 길이 : 0 }; VAR setPseudoElement = 함수 (매개 변수) { {() 정의되지 않은 대해서 typeof parameters.argument === '객체'|| (parameters.argument! == 정의되지 않은 && parameters.property! ==) 경우 (parameters.elements.get ()의 VAR 요소) {에 대한 만약 (!의 element.pseudoElements) element.pseudoElements = { 스타일 : 널 (null), 전 : { 인덱스 : 널 (null), 속성 : 널 (null) }, 후 : { 인덱스 : 널 (null), 속성 : 널 (null) }, ID : 널 (null) }; VAR 선택기 = (함수 () { 경우 (element.pseudoElements.id! == NULL) { 경우 (번호 (element.getAttribute ( '데이터-PE - ID')) == element.pseudoElements.id!) element.setAttribute ( '데이터-PE - ID', element.pseudoElements.id); "[데이터를 PE - ID =" '+ element.pseudoElements.id +' "RETURN] :: '+ parameters.pseudoElement 단계; } 다른 { var에 ID = $ .pseudoElements.length; $ .pseudoElements.length ++ element.pseudoElements.id = ID; element.setAttribute ( '데이터 - PE - ID'ID); "[데이터를 PE - ID =" '+ ID +' "RETURN] :: '+ parameters.pseudoElement 단계; }; }) (); 만약 (! element.pseudoElements.styleSheet) { 경우 (document.styleSheets [0]) { element.pseudoElements.styleSheet document.styleSheets = [0]; } 다른 { VAR 스타일 = document.createElement ( '스타일'); document.head.appendChild (스타일); element.pseudoElements.styleSheet = styleSheet.sheet; }; }; 경우 (element.pseudoElements [parameters.pseudoElement] .properties의 && element.pseudoElements [parameters.pseudoElement]있는 .index) { element.pseudoElements.styleSheet.deleteRule (element.pseudoElements [parameters.pseudoElement]있는 .index); }; 경우 (대해서 typeof parameters.argument === '객체') { parameters.argument = $ .extend ({} parameters.argument); 만약 (! 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] = newIndex가있는 .index; element.pseudoElements [parameters.pseudoElement] = .properties의 parameters.argument; }; VAR 속성 = ''; (parameters.argument에서 VAR 속성) {에 대한 경우 (대해서 typeof parameters.argument [등록] === '기능') element.pseudoElements [parameters.pseudoElement] .properties의 [등록] = parameters.argument [등록] (); 그밖에 element.pseudoElements [parameters.pseudoElement] .properties의 [등록] = parameters.argument [등록]; }; 대 (element.pseudoElements VAR의 속성 [parameters.pseudoElement] .properties의) { 속성 등록 + = + ''+ element.pseudoElements [parameters.pseudoElement] .properties의 [등록] + '중요]! '; }; element.pseudoElements.styleSheet.addRule (선택, 속성 element.pseudoElements [parameters.pseudoElement]있는 .index); } 다른 경우 {(parameters.argument! == 정의되지 않은 && parameters.property! == 정의되지 않은) 만약 (! 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] = newIndex가있는 .index; element.pseudoElements [parameters.pseudoElement] .properties의 = {}; }; 경우 ( "함수"=== parameters.property 대해서 typeof) element.pseudoElements [parameters.pseudoElement] .properties의 [parameters.argument = parameters.property (); 그밖에 element.pseudoElements [parameters.pseudoElement] .properties의 [parameters.argument = parameters.property; VAR 속성 = ''; 대 (element.pseudoElements VAR의 속성 [parameters.pseudoElement] .properties의) { 속성 등록 + = + ''+ element.pseudoElements [parameters.pseudoElement] .properties의 [등록] + '중요]! '; }; element.pseudoElements.styleSheet.addRule (선택, 속성 element.pseudoElements [parameters.pseudoElement]있는 .index); }; }; $ (parameters.elements)을 반환; } 다른 경우 (parameters.argument! == 정의되지 않은 && parameters.property === 정의되지 않은) { VAR 소자 = $ (parameters.elements) 갔지 (0); VAR windowStyle = window.getComputedStyle ( 요소, ':'+ parameters.pseudoElement ) .getPropertyValue (parameters.argument); 경우 (element.pseudoElements) { 반환 $ (parameters.elements) 갔지 (0) .pseudoElements [parameters.pseudoElement] .properties의 [parameters.argument] || windowStyle; } 다른 { windowStyle을 반환 || 없는; }; } 다른 { console.error ( '잘못된 값!'); false를 반환; }; }; $ .fn.cssBefore = 함수 (인수 속성) { 반환 setPseudoElement ({ 요소 :이, pseudoElement : '이전' 인수 : 인수, 부동산 : 부동산 }); }; $ .fn.cssAfter = 함수 (인수 속성) { 반환 setPseudoElement ({ 요소 :이, pseudoElement : '후', 인수 : 인수, 부동산 : 부동산 }); }; }) (); () {(기능 $ $ ( '. 요소') cssBefore ( '내용', ' "새로운 전에!".'); }); .element { 폭 : 480 픽셀; 여백 : 0 자동; 국경 : 2 픽셀 빨간색으로; } .element :: 전에 { 내용 : '전에 올드!'; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">

    값은 jQuery.css의 정상적인 기능과 같이 지정해야

    또한, 당신은 또한 jQuery.css의 정상적인 기능과 같이 의사 요소 매개 변수의 값을 얻을 수 있습니다 :

    console.log( $(element).cssBefore(parameter) );

    JS :

    (함수() { document.pseudoElements = { 길이 : 0 }; VAR setPseudoElement = 함수 (매개 변수) { {() 정의되지 않은 대해서 typeof parameters.argument === '객체'|| (parameters.argument! == 정의되지 않은 && parameters.property! ==) 경우 만약 (!의 parameters.element.pseudoElements) parameters.element.pseudoElements = { 스타일 : 널 (null), 전 : { 인덱스 : 널 (null), 속성 : 널 (null) }, 후 : { 인덱스 : 널 (null), 속성 : 널 (null) }, ID : 널 (null) }; VAR 선택기 = (함수 () { 경우 (parameters.element.pseudoElements.id! == NULL) { parameters.element.setAttribute ( '데이터-PE - 아이디'- (!)) == parameters.element.pseudoElements.id 번호 (parameters.element.getAttribute ( 'ID 데이터-PE')의 경우, parameters.element. pseudoElements.id); "[데이터를 PE - ID =" '+ parameters.element.pseudoElements.id +' "RETURN] :: '+ parameters.pseudoElement 단계; } 다른 { VAR ID는 document.pseudoElements.length를 =; document.pseudoElements.length ++ parameters.element.pseudoElements.id = ID; parameters.element.setAttribute ( '데이터 - PE - ID'ID); "[데이터를 PE - ID =" '+ ID +' "RETURN] :: '+ parameters.pseudoElement 단계; }; }) (); 만약 (! parameters.element.pseudoElements.styleSheet) { 경우 (document.styleSheets [0]) { parameters.element.pseudoElements.styleSheet document.styleSheets = [0]; } 다른 { VAR 스타일 = document.createElement ( '스타일'); document.head.appendChild (스타일); parameters.element.pseudoElements.styleSheet = styleSheet.sheet; }; }; 경우 (parameters.element.pseudoElements [parameters.pseudoElement] .properties의 && parameters.element.pseudoElements [parameters.pseudoElement]있는 .index) { parameters.element.pseudoElements.styleSheet.deleteRule (parameters.element.pseudoElements [parameters.pseudoElement]있는 .index); }; 경우 (대해서 typeof parameters.argument === '객체') { parameters.argument = (함수 () { VAR cloneObject = 대해서 typeof parameters.argument.pop === '기능'? [] : {}; (parameters.argument에서 VAR 속성) {에 대한 cloneObject [등록] = parameters.argument [등록]; }; cloneObject를 반환; }) (); 만약 (! 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] = newIndex가있는 .index; parameters.element.pseudoElements [parameters.pseudoElement] = .properties의 parameters.argument; }; VAR 속성 = ''; (parameters.argument에서 VAR 속성) {에 대한 경우 (대해서 typeof parameters.argument [등록] === '기능') parameters.element.pseudoElements [parameters.pseudoElement] .properties의 [등록] = parameters.argument [등록] (); 그밖에 parameters.element.pseudoElements [parameters.pseudoElement] .properties의 [등록] = parameters.argument [등록]; }; 대 (parameters.element.pseudoElements VAR의 속성 [parameters.pseudoElement] .properties의) { 속성 등록 + = + ''+ parameters.element.pseudoElements [parameters.pseudoElement] .properties의 [등록] + '중요]! '; }; parameters.element.pseudoElements.styleSheet.addRule (선택, 속성 parameters.element.pseudoElements [parameters.pseudoElement]있는 .index); } 다른 경우 {(parameters.argument! == 정의되지 않은 && parameters.property! == 정의되지 않은) 만약 (! 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] = newIndex가있는 .index; parameters.element.pseudoElements [parameters.pseudoElement] .properties의 = {}; }; 경우 ( "함수"=== parameters.property 대해서 typeof) parameters.element.pseudoElements [parameters.pseudoElement] .properties의 [parameters.argument = parameters.property (); 그밖에 parameters.element.pseudoElements [parameters.pseudoElement] .properties의 [parameters.argument = parameters.property; VAR 속성 = ''; 대 (parameters.element.pseudoElements VAR의 속성 [parameters.pseudoElement] .properties의) { 속성 등록 + = + ''+ parameters.element.pseudoElements [parameters.pseudoElement] .properties의 [등록] + '중요]! '; }; parameters.element.pseudoElements.styleSheet.addRule (선택, 속성 parameters.element.pseudoElements [parameters.pseudoElement]있는 .index); }; } 다른 경우 (parameters.argument! == 정의되지 않은 && parameters.property === 정의되지 않은) { VAR windowStyle = window.getComputedStyle ( parameters.element, ':'+ parameters.pseudoElement ) .getPropertyValue (parameters.argument); 경우 (parameters.element.pseudoElements) { 반환 parameters.element.pseudoElements [parameters.pseudoElement] .properties의 [parameters.argument] || windowStyle; } 다른 { windowStyle을 반환 || 없는; }; } 다른 { console.error ( '잘못된 값!'); false를 반환; }; }; Object.defineProperty (Element.prototype, 'styleBefore', { 열거 : 거짓, 값 : 함수 (인수 속성) { 반환 setPseudoElement ({ 요소 :이, pseudoElement : '이전' 인수 : 인수, 부동산 : 부동산 }); } }); Object.defineProperty (Element.prototype, 'styleAfter', { 열거 : 거짓, 값 : 함수 (인수 속성) { 반환 setPseudoElement ({ 요소 :이, pseudoElement : '후', 인수 : 인수, 부동산 : 부동산 }); } }); }) (); document.querySelector ( '. 요소') styleBefore ( '내용', ' "새로운 전에!".'); .element { 폭 : 480 픽셀; 여백 : 0 자동; 국경 : 2 픽셀 빨간색으로; } .element :: 전에 { 내용 : '전에 올드!'; }

    GitHub의 : https://github.com/yuri-spivak/managing-the-properties-of-pseudo-elements/

  18. 18.내가 정의 변수를 사용했다 : 수정 CSS 내부 루트 : (동일한 적용 대상 : 전) 후 의사 요소, 특히 .sliding 중간 아웃에 의해 정의 된 스타일 앵커의 배경 색상 값을 변경하려면 : 호버 : 후와 자바 스크립트 / jQuery를 사용하여 임의의 색상을 생성하고 다음과 같은 데모의 다른 앵커 (#reference)의 콘텐츠 값 :

    내가 정의 변수를 사용했다 : 수정 CSS 내부 루트 : (동일한 적용 대상 : 전) 후 의사 요소, 특히 .sliding 중간 아웃에 의해 정의 된 스타일 앵커의 배경 색상 값을 변경하려면 : 호버 : 후와 자바 스크립트 / jQuery를 사용하여 임의의 색상을 생성하고 다음과 같은 데모의 다른 앵커 (#reference)의 콘텐츠 값 :

    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("");
 }
);

  19. 19.나는 특정 요소에 .css ()를 사용하여 같은 CSS-의사 규칙을 추가하는 jQuery 플러그인을 만들었습니다.

    나는 특정 요소에 .css ()를 사용하여 같은 CSS-의사 규칙을 추가하는 jQuery 플러그인을 만들었습니다.

    용법:

    $('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!"'
  });

  20. 20.$ ( '. 스팬') ATTR ( '데이터 TXT' '갑').; $ ( '. 스팬'). ((클릭 기능) { $ (이) .attr ( '데이터 TXT', '다른 텍스트 "); }) .스팬{ } .span : 후 { 함량 ATTR (데이터 TXT); } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

    $ ( '. 스팬') ATTR ( '데이터 TXT' '갑').; $ ( '. 스팬'). ((클릭 기능) { $ (이) .attr ( '데이터 TXT', '다른 텍스트 "); }) .스팬{ } .span : 후 { 함량 ATTR (데이터 TXT); } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

  21. 21.다른 사람이 전체 스타일 요소와 헤드 요소 추가에 댓글을 당신이 한 번만하고 있다면 그 나쁜 아니지만 당신이 한 번 이상 재설정해야하는 경우는 스타일 요소의 톤하게 될 겁니다. 그래서 내가 ID로 머리에 빈 스타일 요소를 만든 방지하고 이런 식의 innerHTML을 교체 :

    다른 사람이 전체 스타일 요소와 헤드 요소 추가에 댓글을 당신이 한 번만하고 있다면 그 나쁜 아니지만 당신이 한 번 이상 재설정해야하는 경우는 스타일 요소의 톤하게 될 겁니다. 그래서 내가 ID로 머리에 빈 스타일 요소를 만든 방지하고 이런 식의 innerHTML을 교체 :

    <style id="pseudo"></style>

    그리고 자바 스크립트는 다음과 같이 보일 것이다 :

    var pseudo = document.getElementById("pseudo");

function setHeight() {
    let height = document.getElementById("container").clientHeight;
    pseudo.innerHTML = `.class:before { height: ${height}px; }`
}

setHeight()

    이제 내 경우에는 내가 다른 사람의 높이에 따라 전 요소의 높이를 설정하려면이 필요하며이 내가) (창의 크기를 조정할 때마다 setHeight을 실행할 수 있습니다 사용하므로 크기 조정을 변경하고는 <스타일>을 대체합니다 정확히.

    같은 일을하려고 붙어 있었다 사람을 도움이되기를 바랍니다.

  22. 22.나는 간단하고 효과가 당신을 위해 뭔가 다른 물건을 가지고있다.

    나는 간단하고 효과가 당신을 위해 뭔가 다른 물건을 가지고있다.

        <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');
    });

    23. from https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 요소 외부의 클릭을 감지합니까?  (0) 2020.09.20
[JQUERY] 문자열 경로에 의해 중첩 된 자바 스크립트 객체와 배열 액세스  (0) 2020.09.20
[JQUERY] 어떻게 자바 스크립트 객체 리터럴의 키에 대한 변수를 사용하는 방법?  (0) 2020.09.20
[JQUERY] 에서는 event.preventDefault () 대 리턴 거짓  (0) 2020.09.20
[JQUERY] 어떻게 다른 웹 페이지로 리디렉션합니까?  (0) 2020.09.20
,

티스토리툴바