如何簡化 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中文網其他相關文章！