자바스크립트로 의사 : 이전 요소의 콘텐츠 값을 변경하는 방법

JS에 의해 동적으로 변경되는 CSS로 구성된 그래프가 있습니다. 의사 요소별로 그래프 최대값을 다음과 같이 표시합니다:

.graph:before {
    content:""; //value that want set by JS
    position:absolute;
    top:0;
    left:0;
}

그래서 이 값을 JS로 설정해야 합니다. '(".graph:before").css("content", hh);`를 사용해 보았지만 도움이되지 않았습니다. 이 값을 어떻게 얻을 수 있나요?

프로그래밍
javascript jquery
8일 5월 2012 в 8:35
아직 보기가 없습니다.
질문에 대한 의견 (3)

아래 스니펫이 도움이 되길 바라며, CSS attr() 함수를 사용하여 JS를 통해 원하는 content 값을 지정할 수 있습니다. 아래에는 자바스크립트 또는 jQuery를 사용하는 두 가지 옵션이 있습니다:

jQuery:

$('.graph').on('click', function () {
    //do something with the callback
    $(this).attr('data-before','anything'); //anything is the 'content' value
});

JavaScript:

var graphElem = document.querySelector('.graph');
graphElem.addEventListener('click', function (event) {
    event.target.setAttribute('data-before', 'anything');
});

CSS:

.graph:before {
    content: attr(data-before); /* value that that refers to CSS 'content' */
    position:absolute;
    top: 0;
    left: 0;
}
boop
편집된 답변13일 9월 2019 в 12:25
해설 (7)
해결책

업데이트(2018): 댓글에서 언급했듯이 이제 이 작업을 할 수 있습니다.

의사 요소는 DOM의 일부가 아니므로 자바스크립트를 통해 수정할 수 없습니다. 가장 좋은 방법은 CSS에서 필요한 스타일로 다른 클래스를 정의한 다음 해당 클래스를 요소에 추가하는 것입니다. 질문의 내용으로는 불가능해 보이므로 의사 요소 대신 실제 DOM 요소를 사용하는 것을 고려해야 할 수도 있습니다.

James Allardice
편집된 답변10일 4월 2018 в 7:47
해설 (7)

Css 변수를 사용할 수 있습니다.

:root {
  --h: 100px;
}

.elem:after {
  top: var(--h);
}

let y = 10;

document.documentElement.style.setProperty('--h', y + 'px')

https://codepen.io/Gorbulin/pen/odVQVL

해설 (1)

여전히 같은 문제에 대한 해결책을 찾고있는 사람들은 jQuery를 사용하여 다음과 같이 할 수 있습니다:

Change
<script>
    var newValue = '22';//coming from somewhere
    var add = '.graph:before{content:"'+newValue+'"!important;}';
    $('#changeBefore').click(function(){
        $('body').append(add);
    });
</script>

이 예시는 버튼을 클릭하면 changeBefore`를 클릭하면 '.graph:before'의 값이 새로운 동적 값에 따라 변경됩니다.

요소 스타일 :이전 또는 :이후 변경 또는 해당 콘텐츠 가져오기에 대한 자세한 설명은 여기를 참조하세요:

HTML이 다음과 같다고 가정해 봅시다:

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

그리고 CSS에서 :before를 설정하고 다음과 같이 디자인한다고 가정합니다:

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

나중에 쉽게 꺼낼 수 있도록 요소 자체에 content 속성을 설정한 것도 주목하세요. 이제 '버튼'을 클릭하면 :before의 색상을 녹색으로 변경하고 글꼴 크기를 30px로 변경하려고 합니다. 다음과 같이 변경할 수 있습니다:

일부 클래스 .activeS에 필요한 스타일로 CSS를 정의합니다:

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

이제 다음과 같이 :before 요소에 클래스를 추가하여 :before 스타일을 변경할 수 있습니다:

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

':before'의 콘텐츠만 가져오고 싶다면 다음과 같이 할 수 있습니다:

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

도움이 되길 바랍니다.

해설 (2)

I believe 는 단순한 솔루션 attr () 함수를 사용하여 그 내용을 지정할 dtep 요소. # 39, & # 39 이것은 apc® title& 사용 예. 하지만, 사용자 지정 특성을 속성 또한 노력해야 합니다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

document.getElementById('btn_change1').addEventListener("click", function(){
    document.getElementById('test_div').title='Status 1';
});

document.getElementById('btn_change2').addEventListener("click", function(){       
    document.getElementById('test_div').title='Status 2';
});
#test_div {
   margin: 4em;
   padding:2em;
   background: blue;
   color: yellow;
}

#test_div:after {
   content:attr(title);
   background: red;
   padding:1em;
}
Change div:after to [Status 1]
Change div:after to [Status 2]

<div id='test_div' title='Initial Status'>The element to modify</div>

끝 - &lt 스니핏 >;!

해설 (0)

같은 항목을 사용할 경우 ui_policytable_java_spe_policy 오노프스비치 및 2 와 [i18next] css 콘텐츠를 변환할 속성 중 하나를 사용할 수 있습니다 다음 예제에서와 i18next 레임워크 에서 깃허브 (i18next Jquery 레임워크) 그리고 당신이 확장 기능 대체하십시오 코드:

var before = i18next.t('onoffswitch.before');
var after = i18next.t('onoffswitch.after');
$('.onoffswitch-inner')
    .attr('data-before', before )
    .attr('data-after', after );

css 는 코드 및 이 있어야 합니다.

.onoffswitch-inner:before {
    content:  attr(data-before);
    padding-left: 10px;
    background-color: #65AFF5; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content:  attr(data-after);
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
GerA
편집된 답변20일 2월 2019 в 12:10
해설 (0)