찾다
웹 프론트엔드CSS 튜토리얼CSS 진행률 표시줄 속성: 진행률 및 값

CSS 진행률 표시줄 속성: 진행률 및 값

Oct 27, 2023 am 10:14 AM
CSS 진행률 표시줄 속성: 진행률 및 값

CSS 进度条属性:progress 和 value

CSS 진행률 표시줄 속성: 진행률 및 값, 특정 코드 예제가 필요합니다.

진행률 표시줄은 웹 디자인에서 일반적으로 사용되는 요소로 작업이나 작업의 진행 상황을 표시하는 데 사용됩니다. CSS에서는 진행률 및 값 속성을 사용하여 진행률 표시줄의 모양과 동작을 생성하고 제어할 수 있습니다. 이 문서에서는 이러한 속성을 사용하여 사용자 정의 진행률 표시줄 효과를 얻는 방법을 소개하고 특정 코드 예제를 제공합니다.

  1. 진행률 및 값 속성을 사용하여 진행률 표시줄 요소 만들기

HTML의 진행률 요소에 대해 다양한 값을 설정하여 진행률 표시줄을 만들 수 있습니다. 다음은 진행률 표시줄의 샘플 코드입니다.

<progress value="50" max="100"></progress>

이 예에서 value 속성은 50으로 설정되어 진행률 표시줄의 현재 진행률이 50%임을 나타냅니다. max 속성은 100으로 설정되어 진행률 표시줄의 최대값이 100임을 나타냅니다. 값과 최대값의 비율에 따라 CSS는 진행률 표시줄의 너비를 자동으로 계산합니다.

  1. 진행률 표시줄 모양 사용자 정의

CSS를 통해 진행률 표시줄의 색상과 크기를 수정하는 등 진행률 표시줄의 스타일을 사용자 정의할 수 있습니다. 다음은 몇 가지 일반적인 스타일 설정입니다.

/* 修改进度条的颜色 */
progress {
  background-color: #eee; /* 进度条的背景颜色 */
}

progress::-webkit-progress-value {
  background-color: #337ab7; /* 进度条的主题色 */
}

/* 修改进度条的高度 */
progress {
  height: 10px;
}

위 코드에서는 background-color 속성을 사용하여 진행률 표시줄의 색상을 수정합니다. 필요에 따라 적절한 색상을 설정할 수 있습니다. ::webkit-progress-value 의사 요소 선택기를 사용하여 다양한 브라우저 커널의 진행률 표시줄 색상을 설정할 수 있습니다. 진행 표시줄의 높이는 height 속성을 통해 설정할 수 있습니다.

  1. 진행률 표시줄의 진행률을 동적으로 변경합니다.

진행률 표시줄은 값 속성의 값에 따라 현재 진행률을 결정합니다. 프로그램이 실행되는 동안 진행률 표시줄의 진행 상황을 동적으로 변경해야 하는 경우 JavaScript를 통해 수행할 수 있습니다.

var progressBar = document.querySelector('progress');
var button = document.querySelector('button');

button.addEventListener('click', function() {
  if (progressBar.value < progressBar.max) {
    progressBar.value += 10;
  }
});

이 예에서는 진행률 표시줄과 버튼의 DOM 요소를 가져옵니다. 그런 다음 버튼에 클릭 이벤트 리스너를 추가합니다. 버튼을 클릭할 때마다 진행률 표시줄의 현재 값이 최대값보다 작은지 여부를 판단하여 해당 값에 10을 더합니다.

결론

진행률 및 값 속성을 사용하면 진행률 표시줄의 모양과 동작을 쉽게 만들고 제어할 수 있습니다. CSS를 사용하여 진행률 표시줄의 스타일을 맞춤설정할 수 있으며, JavaScript를 통해 진행률 표시줄의 진행률을 동적으로 변경할 수 있습니다. 이 기사가 진행률 표시줄의 속성을 이해하는 데 도움이 되기를 바라며 웹 디자인에서 더 나은 결과를 얻으시기 바랍니다!

위 내용은 CSS 진행률 표시줄 속성: 진행률 및 값의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
드래그 ' 및 Droppin ' 반응에서드래그 ' 및 Droppin ' 반응에서Apr 17, 2025 am 11:52 AM

React Ecosystem은 모두 드래그 앤 드롭의 상호 작용에 중점을 둔 많은 라이브러리를 제공합니다. 우리는 React-dnd, React-beautiful-dnd를 가지고 있습니다.

빠른 소프트웨어빠른 소프트웨어Apr 17, 2025 am 11:49 AM

최근 빠른 소프트웨어에 대해 놀랍도록 상호 연결된 것들이있었습니다.

배경 클립이있는 중첩 된 그라디언트배경 클립이있는 중첩 된 그라디언트Apr 17, 2025 am 11:47 AM

나는 자주 배경 클립을 사용한다고 말할 수 없습니다. I ' D WART IT IT는 일상적인 CSS 작업에서 거의 사용되지 않았습니다. 그러나 나는 Stefan Judis의 게시물에서 그것을 상기시켰다.

React 후크와 함께 requestAnimationFrame 사용React 후크와 함께 requestAnimationFrame 사용Apr 17, 2025 am 11:46 AM

requestAnimationFrame을 사용하여 애니메이션은 쉬워야하지만 React의 문서를 철저히 읽지 않으면 몇 가지 문제가 발생할 수 있습니다.

페이지 상단으로 스크롤해야합니까?페이지 상단으로 스크롤해야합니까?Apr 17, 2025 am 11:45 AM

아마도이를 사용자에게 제공하는 가장 쉬운 방법은 요소의 ID를 대상으로하는 링크 일 것입니다. 그래서 ...처럼 ...

최고 (GraphQL) API는 귀하가 작성한 것입니다최고 (GraphQL) API는 귀하가 작성한 것입니다Apr 17, 2025 am 11:36 AM

들어보세요, 나는 GraphQL 전문가가 아니지만 함께 일하는 것을 좋아합니다. 프론트 엔드 개발자로서 데이터를 노출시키는 방법은 꽤 멋지다. 메뉴와 같습니다

주간 플랫폼 뉴스 : 텍스트 간격 북마크, 최상위 차단, 새로운 앰프 로딩 표시기주간 플랫폼 뉴스 : 텍스트 간격 북마크, 최상위 차단, 새로운 앰프 로딩 표시기Apr 17, 2025 am 11:26 AM

이번 주에 타이포그래피를 검사하기위한 편리한 북마크 인 Roundup, JavaScript 모듈과 Facebook의 Facebook 등을 어떻게 가져 오는지 땜질하기 위해 대기하는 편리한 북마크 인 Roundup과 Facebook의

테두리 반경을 보존하는 동안 상자를 확장하는 다양한 방법테두리 반경을 보존하는 동안 상자를 확장하는 다양한 방법Apr 17, 2025 am 11:19 AM

나는 최근 코데 펜에서 흥미로운 변화를 발견했다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)