브라우저 유형 접두사를 아무리 싫어하더라도 우리 모두는 매일 직면해야 합니다. 그렇지 않으면 무언가가 제대로 작동하지 않을 것입니다. 이러한 접두사를 사용하는 방법에는 CSS(예: "-moz-")와 JS의 두 가지 방법이 있습니다. 현재 사용되는 접두어를 결정하는 데 사용할 수 있는 영리한 JavaScript 스크립트가 포함된 놀라운 X-Tag 프로젝트가 있습니다. 작동 방식을 보여드리겠습니다!
예를 들어 CSS 접두사는 IE의 경우 "-ms-", Opera 이전 버전의 경우 "-o-", Firefox의 경우 "-moz-", Safari/Chrome의 경우 "-webkit-"입니다. . JavaScript에는 이를 결정하는 여러 가지 방법이 있습니다.
방법 1: 특징 판단
// 取浏览器的 CSS 前缀 var prefix = function() { var div = document.createElement('div'); var cssText = '-webkit-transition:all .1s; -moz-transition:all .1s; -o-transition:all .1s; -ms-transition:all .1s; transition:all .1s;'; div.style.cssText = cssText; var style = div.style; if (style.webkitTransition) { return '-webkit-'; } if (style.MozTransition) { return '-moz-'; } if (style.oTransition) { return '-o-'; } if (style.msTransition) { return '-ms-'; } return ''; }();
div를 생성하고 -webkit-, -moz-, -o-, -ms- 접두사 CSS 스타일을 추가한 다음 스타일을 가져오고 style.xxxTransition을 사용하여 접두사를 결정합니다.
방법 2: getCompulatedStyle은 documentElement의 모든 스타일을 가져온 다음 구문 분석합니다.
먼저 window.getCompulatedStyle을 통해 스타일을 가져온 후 스타일을 배열로 변환합니다
var styles = window.getComputedStyle(document.documentElement, ''); var arr = [].slice.call(styles); console.log(arr);
Firefox arr은 다음과 같습니다
크롬 arr은 다음과 같습니다
각 브라우저에서 구현한 CSS 접두사 이름을 가져온 것을 확인할 수 있습니다.
모든 속성을 문자열로 연결한 다음 정규식 일치를 사용하여 접두사를 찾습니다.
// 取浏览器的 CSS 前缀 var prefix = function() { var styles = window.getComputedStyle(document.documentElement, ''); var core = ( Array.prototype.slice .call(styles) .join('') .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']) )[1]; return '-' + core + '-'; }();
방법 2는 방법 1보다 코드가 훨씬 적다는 것을 알 수 있습니다. 방법 1과 방법 2는 모두 익명 함수를 사용하여 일회성 실행 후 결과를 반환합니다. 매번 함수를 호출할 필요가 없습니다.
위 내용은 편집자가 JavaScript를 사용하여 CSS 브라우저 유형 접두사를 결정하는 두 가지 방법을 소개하는 방법입니다.