Xây dựng đối tượng JavaScript để sử dụng với jQuery .css() (điều gì về các khóa trùng lặp?)

Question

Tôi sử dụng phương thức .css() của jQuery để áp dụng kiểu cho một phần tử. Tôi làm như vậy:

var cssObj = { 
    'background-color' : '#000', 
    'background-image': '-webkit-linear-gradient(top,#000,#fff)', 
    'background-image': 'linear-gradient(top,#000,#fff)' 
}; 

$(".element").css(cssObj); 

Vấn đề với điều này rõ ràng là tôi sử dụng các phím trùng lặp trong đối tượng, điều này không hề mát mẻ.

Làm cách nào để giải quyết vấn đề này? Tôi cần phải vượt qua các tham số CSS với tên trùng lặp để giải quyết hầu hết các trình duyệt.

Answer 1

Có nhiều phím cùng tên không hợp lệ, và sẽ tạo ra một lỗi trong chế độ nghiêm ngặt.

Tạo chức năng/plugin áp dụng các thuộc tính của cssObj của bạn. Nếu tìm thấy một chuỗi chuỗi ký tự, hãy thiết lập thuộc tính CSS với giá trị mong muốn.
Nếu tìm thấy mảng, lặp qua nó và cập nhật thuộc tính với từng giá trị. Nếu tìm thấy một giá trị không hợp lệ, nó bị bỏ qua.

DEMO: http://jsfiddle.net/RgfQw/

// Created a plugin for project portability 
(function($){ 
    $.fn.cssMap = function(map){ 
     var $element = this; 
     $.each(map, function(property, value){ 
      if (value instanceof Array) { 
       for(var i=0, len=value.length; i<len; i++) { 
        $element.css(property, value[i]); 
       } 
      } else { 
       $element.css(property, value); 
      } 
     }); 
    } 
})(jQuery); 

// Usage: 
var cssObj = { 
    'background-color': '#000', 
    'background-image': ['-webkit-linear-gradient(top,#000,#fff)', 
         'linear-gradient(top,#000,#fff)'] 
}; 
$(".element").cssMap(cssObj); 

Answer 2

Dường như bạn ngụ ý rằng phương thức .css() hoạt động như thuộc tính CSS trong tệp .css. Tôi không nghĩ nó hoạt động như thế. Nhưng đây là một vài lựa chọn:

1. Sử dụng trình duyệt sniffing (tại sao không bạn đã làm CSS đa trình duyệt với tiền tố nhà cung cấp?)

2. Sử dụng stylesheet thực tế liên quan như <link /> thẻ

3. Tạo <style> và thêm các quy tắc vào đó, động.

4. Sử dụng thuộc tính style: $('#my').attr('style', 'background: ...; bakground: ...; border-radius: ...; -moz-border-radius: ...;');

Answer 3

Bạn cần phải tạo ra một tùy chỉnh $.cssHooks (more info) xác định cái nào là đúng mẫu, bằng cách thực hiện các bài kiểm tra khác nhau --- hoặc bạn chỉ có thể sử dụng một lớp css với $.fn.addClass.

Answer 4

Lời khuyên của tôi là đặt CSS của bạn vào biểu định kiểu trong lớp riêng của nó và chỉ cần thêm lớp đó vào phần tử của bạn thay thế. Bản thân trình duyệt sẽ xác định thuộc tính nào của thuộc tính background-image mà nó hỗ trợ và do đó sẽ chỉ hiển thị thuộc tính đó.

CSS

.gradient-bg { 
    background-color: #000; 
    background-image: -webkit-linear-gradient(top, #000, #fff); 
    background-image: linear-gradient(top, #000, #fff) 
} 

jQuery

$(".element").addClass("gradient-bg"); 

Answer 5

Có một kho lưu trữ của cssHooks trên github đối với hầu hết tài sản. Viết móc của riêng bạn là khó khăn, rất nhiều trường hợp cạnh.

https://github.com/brandonaaron/jquery-cssHooks

Đối với độ dốc hình nền, bạn cần:

https://github.com/brandonaaron/jquery-cssHooks/blob/master/gradients.js