HTML5의 진행 요소에 대한 간략한 이해 및 호환성 문제 분석-H5 튜토리얼-php.cn

이 글은 HTML5의 진행 요소에 대한 간략한 소개와 호환성 문제에 대한 분석을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 진행 요소의 기본 이해

1. 기본 지식

# #

진행률 요소는 HTML5 계열에 속하며 진행률 표시줄을 나타냅니다. IE10+ 및 기타 안정적인 브라우저에서 지원됩니다.

참고: Internet Explorer 9 및 이전 버전은태그를 지원하지 않습니다.

라벨은 작업(프로세스)의 진행 상황을 나타냅니다.

2. 기본 속성# #max, 값, 위치 및 레이블.

(1) max는 최대값을 나타냅니다. 기본값인 경우 진행 값 범위는 0.0~1.0입니다. max=100으로 설정하면 진행 값 범위는 0~100입니다.

(2) 값은 max=100인 경우 값이 50입니다. , 진행률 값은 정확히 절반입니다. value 속성의 유무에 따라 진행 진행률 표시줄이 결정적인지 여부가 결정됩니다.

예를 들어는 값이 없고 불확실하므로 IE10 브라우저에서는 도트 애니메이션의 무한 루프처럼 보입니다.

그러나와 같은 값 속성이 있으면(값이 없더라도) 결정된 것으로 간주됩니다.

(3) 위치는 읽기 전용 속성, 현재 진행 위치는 value/max 값입니다. 진행률 표시줄이 확실하지 않은 경우 값은 -1입니다.

(4) 레이블도 읽기 전용 속성이며, 얻은 것은 진행률 요소를 가리키는 레이블 요소입니다. 예를 들어 document.querySelector("progress").labels는 HTMLCollection을 반환합니다.

2. Progress 요소 호환성 처리 예시

로그인 후 복사

css 호환성 코드# #

progress { display: inline-block; width: 160px;height: 20px; border: 1px solid #0064B4; background-color:#e6e6e6;color: #0064B4; /*IE10*/} /*ie6-ie9*/ progress ie {display:block;height: 100%;background: #0064B4; } progress::-moz-progress-bar { background: #0064B4; } progress::-webkit-progress-bar { background: #e6e6e6; } progress::-webkit-progress-value { background: #0064B4; }

로그인 후 복사