Tôi có thể đặt nhiều giá trị của cùng một thuộc tính CSS với Javascript không?

Question

Tôi muốn đặt theo chương trình giá trị CSS cursor cho cả hai -webkit-grab và -moz-grab. Ví dụ: trong biểu định kiểu, biểu mẫu sẽ được thể hiện là

mySelector{ 
    cursor:-webkit-grab; 
    cursor:-moz-grab; 
} 

Vì vậy, ở đây, phần tử mySelector có con trỏ được xác định hai lần. Trình duyệt Webkit sử dụng định nghĩa đầu tiên, Firefox thứ hai. Tôi tự hỏi nếu có bất kỳ cách nào trong Javascript để làm tương đương. Tôi nhận ra mình có thể sắp xếp một lớp, nhưng câu hỏi của tôi là vì sự tò mò để xem liệu nó có khả thi không, hơn là giải quyết một vấn đề thực tế mà tôi hiện đang có.

Chỉnh sửa Để làm rõ - CSS tôi đã đăng (mặc dù có bộ chọn hợp lệ) KHÔNG hoạt động trên cả hai trình duyệt. Tôi chỉ tự hỏi nếu có một cách javascript chỉ để làm điều này.

Answer 1

Một cách tôi đã thấy là chỉ cần kiểm tra xem việc gán giá trị có thành công hay không. Nếu bạn gán một giá trị mà trình duyệt không hiểu, nó chỉ đơn giản bỏ qua nó. Ví dụ trong webkit:

> d = document.createElement('div') 
    <div>​</div>​ 
> d.style.cursor = '-moz-grab'; 
    "-moz-grab" 
> d.style.cursor 
    "" 

Vì vậy, bạn có thể sử dụng hành vi đó để cuộn chức năng riêng của bạn:

var setVendorStyle = (function() { 
    var vendor_prefix = ['-moz-', '-webkit-']; 
    return function(element, prop, value) { 
     // try unmodified value first 
     element.style[prop] = value; 
     if (element.style[prop] === value) { 
      return value; 
     } 
     // try vendor prefixes 
     for (var i = 0, l = vendor_prefix.length; i < l; i++) { 
      var vendor_value = vendor_prefix[i] + value; 
      element.style[prop] = vendor_value; 
      if (element.style[prop] === vendor_value) { 
       return vendor_value; 
      } 
     } 
     return false; // unsuccessful 
    }; 
}()); 

Cách sử dụng:

setVendorStyle(element, 'cursor', 'grab'); 

Điều này có lẽ sẽ không làm việc cho mỗi Thuộc tính CSS, đặc biệt là không có viết tắt, nhưng hy vọng cho những cái có giá trị đơn giản.

Answer 2

có thể bạn có thể phát hiện trình duyệt và thêm css thích hợp. một cái gì đó như thế này:

if (jQuery.browser.mozilla) 
    $('mySelector').css('cursor','-moz-grab'); 
else if (jQuery.browser.safari) 
    $('mySelector').css('cursor','-webkit-grab'); 

Answer 3

Bạn cũng có thể thiết lập các phong cách sử dụng style.cssText tài sản:

element.style.cssText = "cursor:-webkit-grab; cursor:-moz-grab; cursor:grab;"; 

trình duyệt sẽ cố gắng phân tích giá trị giống như cách họ phân tích cú pháp CSS và áp dụng tất cả các thuộc tính họ có thể nhận ra. Nhưng tôi khuyên bạn nên định nghĩa các kiểu này trong một lớp và chỉ cần thêm lớp này vào phần tử thay thế.

Answer 4

Tôi đang tạo trang web để tôi có thể kéo các mục và tôi muốn bao gồm các con trỏ lấy mẫu đẹp đó: D. Tôi đã thử 2/3 trong số các tùy chọn ở trên , nhưng cả hai đều không hoạt động.
Ngoài ra tôi nghĩ rằng giải pháp trình duyệt phát hiện không phải là tối ưu/chính xác đủ.

Đây là giải pháp của tôi:

Đầu tiên file css:

.item{ 
    cursor: -moz-grab; 
    cursor: -webkit-grab; 
} 

.grabbed{ 
    cursor: -moz-grabbing; 
    cursor: -webkit-grabbing; 
} 

Vì vậy, con trỏ tiêu chuẩn sẽ được 'lấy' cho tôi. Đảm bảo rằng .grabbed luôn nằm sâu hơn trong tệp css của bạn so với lớp tiêu chuẩn .item.

Cuối cùng, các tập tin js:

 $(".item").draggable({   
     start: function() { 
      $(".item").addClass("grabbed");//     
     }, 
     stop: function() { 
      $(".item").removeClass("grabbed"); 
     } 
    }); 

Bạn có thể thấy rằng bất cứ khi nào tôi bắt đầu kéo, .grabbed được thêm vào, vì vậy con trỏ của tôi sẽ là 'lấy'.
Khi tôi dừng kéo, lớp .grabbed bị xóa và con trỏ trở về 'lấy'.