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

我正在为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>

//这是Javascript

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代码失败引起的。你能告诉我这里出了什么问题吗？

最佳答案

可以使用jQuery查询样式值，如下所示：

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

alert(borderTopColor);

这意味着您不需要尝试手动解析样式属性。
您也可以animate style changes，包括colours, with the jquery-color plugin：

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

最后。。。如果在CSS psuedo类（如: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;
}

关于jquery - 不同浏览器中的不同样式格式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15926133/