不同瀏覽器中的不同樣式格式

Question

我對div元素使用邊框樣式。我想用jQuery動態改變邊框樣式。

當我在jQuery中獲得邊框樣式時，有時在Chrome中它可以正常工作，有時不會。在IE中它不起作用，在Mozilla中它工作正常。

下面是我的代碼：

//這是HTML元素

<div id="blankcontainer1" style="overflow:hidden; width:100px; 
          height:100px; background-color:#a2a2a2; 
          border-top-width:1px; 
          border-top-style:solid; 
          border-top-color:#fa0000; 
          border-right:1px solid #666666; 
          border-bottom:1px solid #666666; 
          border-left:1px solid #666666; 
          border-top-left-radius:0px; 
          border-top-right-radius:0px; 
          border-bottom-left-radius:0px; 
          border-bottom-right-radius:0px;"></div> 

//這是Java腳本

var elestyle = $("#blankcontainer1").attr("style"); 
var splitstyle = elestyle.split(";"); 

var i = 0; 
while(i < splitstyle.length){ 
    var attrstyle = splitstyle[i].split(":"); 
    if($.trim(attrstyle[0]) == "border-top-width") 
     $("#containersetting #btsize").val($.trim(attrstyle[1]).substring(0, $.trim(attrstyle[1]).length-2)); 
    if($.trim(attrstyle[0]) == "border-top-style") 
     $("#containersetting #btstyle").val($.trim(attrstyle[1])); 
    if($.trim(attrstyle[0]) == "border-top-color"){ 
     var bordtcolor = $.trim(attrstyle[1]); 
     if(bordtcolor.indexOf('rgb') !== -1)     
       bordtcolor=colorToHex(bordtcolor); 

     $("#containersetting #btcolor").val(bordtcolor); 
    } 
} 

在上面的代碼，顯示Chrome的風格 -

border-top-width: 1px; 
border-top-style: solid; 
border-top-color: #fa0000; 

但有時它會顯示

border-width: 1px; 
border-style: solid; 
border-color: rgb(250, 0, 0) rgb(102, 102, 102) rgb(102, 102, 102); 

顯示IE風格：

border-top:#fa0000 1px solid; 

所以，這是我的JavaScript代碼失敗造成的。你能告訴我這裏有什麼問題嗎？

Answer 1

您可以使用jQuery查詢樣式值 - 這樣的：

var borderTopColor = $('#blankcontainer1').css('border-top-color'); 

alert(borderTopColor); 

這意味着你不需要嘗試和手動解析style屬性。

您還可以animate style changes，包括colours, with the jquery-color plugin：

$('#blankcontainer1').animate({ 
    borderTopColor: '#abcdef' 
}, 1000); 

最後...如果你這樣做是在由CSS僞類代表東西（如:hover），你可以使用CSS3過渡：

a { 
    -moz-transition:all 0.5s ease; 
    -o-transition:all 0.5s ease; 
    -webkit-transition:all 0.5s ease; 
    transition:all 0.5s ease; 
    borderTopColor: #fedcba; 
} 

a:hover { 
    borderTopColor: #abcdef; 
}