Question

我正在为div元素使用border样式。我想使用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代码失败造成的。你能告诉我这里出了什么问题吗？

Answer 1

您可以使用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伪造类（如: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;
}

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

1 个答案: