использования заменить браузер префиксы JS/CSS

Question

Я делаю яваскрипт сценария, который хочет сделать что-то вроде этого:

elementObject.style.transform.replace('...','...'); 
elementObject.style.webkitTransform.replace('...','...'); 

И только выяснить это, да, я поставил оба этих стили в начале сценарий. Однако это вызывает ошибки, поскольку в Chrome, например, он не распознает стиль преобразования. Поэтому замена не выполняется, потому что elementObject.style.transform не определено, а undefined не заменяет метод. Есть ли способ сделать это, не вызывая этих ошибок? Я просто хочу преобразование webkit, мне не нужны moz, o или любой другой префикс.

Answer 1

var st = elementObject.style; 
if (st.transform !== undefined) st.transform = st.transform.replace('...','...'); 
// ... 

или более общий:

function replaceStyle(element, style, text, replacement) { 
    var vendors = ['webkit', 'moz', 'o', 'ms']; 
    var st = element.style; 
    if (st[style] !== undefined) st[style] = st[style].replace(text, replacement); 
    style = style.charAt(0).toUpperCase()+style.substring(1); 
    for (var i=0, l=vendors.length; i<l; i++) { 
    var vendorStyle = vendors[i]+style; 
    if (st[vendorStyle] !== undefined) 
     st[vendorStyle] = st[vendorStyle].replace(text, replacement); 
    } 
} 

// sample call (setting width from "40px" to "100%") 
replaceStyle(myElementObject, 'with', '40px', '100%'); 

Answer 2

Вы должны использовать шаблон Adapter дизайна.

Например:

function transformStyle() { 
    var tempEl = document.createElement('div'), 
     elStyle = tempEl.style; 

    if (typeof elStyle.transform !== 'undefined') { 
     transformStyle = function (el, val) { 
      val != null && (el.style.transform = val); 
      return el.style.transform; 
     }; 
    } else if (typeof elStyle.webkitTransform !== 'undefined') { 
     transformStyle = function (el, val) { 
      val != null && (el.style.webkitTransform = val); 
      return el.style.webkitTransform; 
     }; 
    } else { 
     transformStyle = function() { return ''; }; //ignore when not supported 
    } 

    tempEl = null; 
    elStyle = null; 

    return transformStyle.apply(this, arguments); 
} 

var el = document.createElement('div'); 

transformStyle(el, 'rotate(-2deg)'); //set style 
transformStyle(el); //rotate(-2deg) 

Очевидно, что вы могли бы написать что-то более общие, такие как метод style, который позволяет доступ или модифицировать любые стили. Вы можете использовать список префиксов поставщиков, чтобы сделать код более DRY. Предыдущий код был всего лишь примером.