不同浏览器中的不同样式格式

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