Đặt CSS có tiền tố của nhà cung cấp bằng cách sử dụng javascript

Question

... là một nỗi đau lớn.

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

Có thư viện/khung/cách nào tốt hơn để làm điều này không? Tốt hơn chỉ với một dòng JS?

Answer 1

Tôi không biết bất kỳ thư viện nào thực hiện điều này, nhưng nếu tất cả chỉ là tiền tố - đó là, không có sự khác biệt về tên hoặc cú pháp - viết một hàm mình sẽ không quan trọng.

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; 
} 

Sau đó, bạn chỉ có thể sử dụng điều này trong hầu hết các trường hợp.

Answer 2

Có plugin này jquery mà chăm sóc nó https://github.com/codler/jQuery-Css3-Finalize

Answer 3

Bạn có thể tìm tiền tố nhà cung cấp tương ứng sử dụng Javascript như sau số-

var prefix = (function() { 
    var styles = window.getComputedStyle(document.documentElement, ''), 
    pre = (Array.prototype.slice 
     .call(styles) 
     .join('') 
     .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']) 
    )[1], 
    dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1]; 
    return { 
    dom: dom, 
    lowercase: pre, 
    css: '-' + pre + '-', 
    js: pre[0].toUpperCase() + pre.substr(1) 
    }; 
})(); 

Trên đây trả về một đối tượng của nhà cung cấp trình duyệt tương ứng của tiếp đầu ngữ.

Đã lưu nhiều mã trùng lặp trong tập lệnh của tôi.

Nguồn - blog của David Walsh: https://davidwalsh.name/vendor-prefix

Answer 4

Hiện tại cuối năm 2015 và tình hình đã thay đổi đôi chút. Trước hết, nhận xét của McBrainy về cách viết hoa ở trên là quan trọng. Tiền tố webkit hiện là Webkit, nhưng may mắn chỉ được Safari sử dụng tại thời điểm này. Cả Chrome và Firefox đều hỗ trợ el.style.transform mà không có tiền tố ngay bây giờ và tôi nghĩ rằng IE cũng vậy. Dưới đây là một giải pháp hiện đại hơn một chút cho nhiệm vụ trong tầm tay. Nó kiểm tra đầu tiên để xem nếu chúng ta thậm chí không cần đến tiền tố sở hữu chuyển đổi của chúng tôi:

var transformProp = (function(){ 
    var testEl = document.createElement('div'); 
    if(testEl.style.transform == null) { 
    var vendors = ['Webkit', 'Moz', 'ms']; 
    for(var vendor in vendors) { 
     if(testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) { 
     return vendors[vendor] + 'Transform'; 
     } 
    } 
    } 
    return 'transform'; 
})(); 

Sau đó, chúng tôi chỉ có thể sử dụng một cuộc gọi một lót đơn giản để cập nhật các transform tài sản trên một yếu tố:

myElement.style[transformProp] = 'translate3d(0,' + dynamicY + 'px,0)'; 

Answer 5

Nếu bạn đang thiết lập quy trình làm việc của mình với Gulp, ví dụ bạn có thể sử dụng Postcss autoprefixer là công cụ tiện dụng trong việc giải quyết các tiền tố của nhà cung cấp trình duyệt. Nó sử dụng JS để biến đổi bạn css.