JavaScript CSS 공급업체 접두어를 어떻게 단순화할 수 있나요?

JavaScript를 사용한 공급업체 접두사

JavaScript를 사용하여 CSS로 요소 스타일을 지정하는 것은 지루할 수 있으며, 특히 공급업체 접두사를 처리할 때 더욱 그렇습니다. 기존 접근 방식에서는 코드 블록에 표시된 것처럼 접두사가 붙은 각 속성을 수동으로 설정하는 작업이 포함됩니다.

var transform = 'translate3d(0,0,0)';
elem.style.webkitTransform = transform;
elem.style.mozTransform = transform;
elem.style.msTransform = transform;
elem.style.oTransform = transform;

간소화된 솔루션

이 프로세스를 단순화하기 위해 사용자 정의 함수는 다음을 수행할 수 있습니다. 생성:

function setVendor(element, property, value) {
  element.style["webkit" + property] = value;
  element.style["moz" + property] = value;
  element.style["ms" + property] = value;
  element.style["o" + property] = value;
}

이 함수는 세 가지 매개변수, 즉 스타일을 지정할 요소, 설정할 속성, 원하는 값을 사용합니다. 지원되는 접두사를 반복하고 적절한 스타일을 설정합니다.

사용

setVendor 함수를 사용하면 위의 코드 블록을 다음과 같이 단순화할 수 있습니다.

setVendor(elem, "Transform", transform);

이 한 줄의 코드는 필요한 모든 공급업체 접두사와 함께 변환 스타일을 효과적으로 적용하여 스타일을 산들바람.

위 내용은 JavaScript CSS 공급업체 접두어를 어떻게 단순화할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!