내 CSS 파일에는 그라데이션 효과로 진행률 표시 줄의 스타일을 지정하는 다음 코드 (Google Chrome 용)가 있습니다.
progress[value] {
width: 100%; height: 40px;
margin: 0 0 3em;
border: 4px solid #000000;
}
progress::-webkit-progress-value {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 44%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(right, #04d647, #009999);
}
그러나 내 JavaScript 코드로 인해 진행률 표시 줄이 지속적으로 값을 변경합니다. 지금은 그래디언트 색상이 녹색 그래디언트로 설정되어 있지만 값이 얼마나 높은지에 따라 색상을 변경하고 싶습니다 (예 : 30 % 미만 = 빨간색 그래디언트, 65 % 미만 30 % 이상 = 노란색 그래디언트, 65 % 이상 = 녹색 그라데이션).
HTML 파일에서 시작하는이 JavaScript 코드가 있지만 진행중인 색상을 변경하는 방법을 모르겠습니다 ::-webkit-progress-value 값이 무엇인지에 따라 달라집니다. webkit-progress를 태그로 사용하는 방법을 알고 있습니다.
if (progressbar1.value >= .30) {
$("progress::-webkit-progress-value").css("background-color", "#424242");
// something like this^^....what tags/scripts go here??
}
내가 무엇을 잘못하고 있지?
progress태그에 데이터 속성을 추가 하면 그래디언트를 변경할 값이 보관됩니다.
<progress data-value="0">
그런 다음 JavaScript에서 진행률 표시 줄의 값을 확인하고 그래디언트를 변경하려는 값을 초과하는 경우 데이터 속성을 업데이트합니다.
if(progressbar1.value>=65)
progressbar1.dataset.value=65
else if(progressbar1.value>=30)
progressbar1.dataset.value=30
else
progressbar1.dataset.value=0
마지막으로 CSS에서 속성 선택기를 사용하여 속성의 각 값에 대한 규칙을 설정 data-value하고 그라디언트 및 / 또는 원하는 다른 스타일을 변경합니다.
progress[data-value="0"]::-webkit-progress-value{
background-image:/* red gradient here */;
}
progress[data-value="30"]::-webkit-progress-value{
background-image:/* yellow gradient here */;
}
progress[data-value="65"]::-webkit-progress-value{
background-image:/* green gradient here */;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다