JavaScript를 사용하여 CSS 브라우저 유형 prefix_javascript 기술을 결정하는 두 가지 방법

브라우저 유형 접두사를 아무리 싫어하더라도 우리 모두는 매일 직면해야 합니다. 그렇지 않으면 무언가가 제대로 작동하지 않을 것입니다. 이러한 접두사를 사용하는 방법에는 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 브라우저 유형 접두사를 결정하는 두 가지 방법을 소개하는 방법입니다.