모두가 여전히 자바 스크립트 인라인 스타일을 작성하는 방법을 기억해야합니까? (내가 말도 안되는 말을하는 것 같다!)
프론트 엔드 개발 프로세스에서는 때때로 브라우저의 커널 접두사를 판단하고 브라우저에 대해 다른 처리를 만들어야하므로이를 수행 할 수 있습니다.
ALERT (element.style.webKittransition); 이것은 WebKit과 함께 전환 값을 접두사하게 만드는 것입니다. 그러나 WebKit Prefix가있는 브라우저가 아닌 경우 정의되지 않은 반환됩니다. 그리고 우리는 모든 커널 접두사를 열거 한 다음 특정 CSS의 가치를 얻어 판단을 내릴 수 있습니다. 코드는 다음과 같습니다.
함수 getVendorPrefix () {// 요소에 전달을 피하기 위해 본문을 사용하여 var body = document.body || document.documentElement, style = body.style, 벤더 = [ 'webkit', 'khtml', 'moz', 'ms', 'o'], i = 0; while (i <vendor.length) {// 여기서 우리는 해당 커널 접두사가 있는지 여부를 결정합니다. } i ++; }}그런 다음 브라우저의 커널 접두사를 알기 위해 getVendorPrefix () 만 호출하면됩니다. Undefined가 반환되면 브라우저가 CSS3 속성을 지원하지 않음, 즉 커널 접두사가 없습니다.
CSS를 쓸 수있을 때 CSS를 쓸 수있을 때 JavaScriptP를 작성하지 않는다는 것을 모두 알아야합니다. 결국, CSS의 성능은 JS를 스스로 작성하는 것보다 높을 것입니다. 따라서 일부 실제 발전에서는 간단한 그림 회전 목마와 같은 전환을 사용할 것입니다. 우리는 CSS3 전환을 사용하거나 jQuery의 애니메이션을 사용하거나 직접 글을 쓸 수 있지만 CSS3의 성능은 확실히 높아 지므로 두 개의 코드 세트를 작성하고 CSS3을 지원하는 브라우저에 애니메이션을 사용할 수 있으며 타이머 또는 애니메이션은 지원하지 않으면 사용됩니다. 이것은 당신에게 더 나은 사용자 경험을 제공 할 것입니다.
위는 jQuery.slides.js의 플러그인을 보는 경험입니다. 더 나은 방법이 있으면 알려주십시오.