HTML5의 진행 요소에 대한 간략한 이해 및 호환성 문제 분석

不言
풀어 주다: 2018-09-15 15:43:38
원래의
2209명이 탐색했습니다.

이 글은 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 요소 호환성 처리 예시

<progress max="100" value="20"><ie style="width:20%;"></ie></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; }
로그인 후 복사
관련 권장사항:

HTML5의 진행률 요소에 대한 자세한 소개 및 호환성 처리

위 내용은 HTML5의 진행 요소에 대한 간략한 이해 및 호환성 문제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!