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