当前位置: 代码迷 >> Web前端 >> 元素圆角的兑现
  详细解决方案

元素圆角的兑现

热度:56   发布时间:2012-11-23 00:03:43.0
元素圆角的实现
  function RoundCorner(obj,style)
  {
    var r = [];
    var styles = [
      {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0 1px","0 1px","0 2px","0 3px","0 5px"]},
      {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0px","0px","0px","0px","0px"]	},
      {top:["0 0 0 5px","0 0 0 3px","0 0 0 2px","0 0 0 1px","0 0 0 1px"],bottom:["0 1 0 0px","0 1 0 0px","0 2 0 0px","0 3 0 0px","0 5 0 0px"]},
      {top:["0 5 0 0px","0 3 0 0px","0 2 0 0px","0 1 0 0px","0 1 0 0px"],bottom:["0 0 0 1px","0 0 0 1px","0 0 0 2px","0 0 0 3px","0 0 0 5px"]}
    ]; 
    if (!style || style>styles.length) style = 1;
    style--;
    var btop = styles[style].top,bbottom = styles[style].bottom;
    if (typeof obj == "string") obj = document.getElementById(obj);
    var objp = obj.parentNode;
    if (!obj || !objp) return;
    var bg = '';
    var cssProperty = "backgroundColor";
    var mozillaEquivalentCSS = "background-color";
    if (objp.currentStyle)
      var actualColor = objp.currentStyle[cssProperty];
    else
    {
      var cs = document.defaultView.getComputedStyle(objp, null);
      var actualColor = cs.getPropertyValue(mozillaEquivalentCSS);
    }
    if (actualColor == "transparent" && objp.parentNode) bg = arguments.callee(objp.parentNode);
    else if (actualColor == null) bg = "#ffffff";
    else bg = actualColor;
    var HTML = obj.innerHTML;
    obj.innerHTML = "";
    for(var istop=1;istop>=0;istop--)
    {
      var topborder = document.createElement("b");
      topborder.style.display = "block";
      topborder.style.height = "2px";
      topborder.style.backgroundColor = bg;
      for(var i=0;i<btop.length;i++)
      {
        var b = document.createElement("b");
        if (obj.style.backgroundColor)
          b.style.backgroundColor = obj.style.backgroundColor;
        else if (obj.className)
          b.className = obj.className;
        b.style.display = "block";
        b.style.margin = (istop)?btop[i]:bbottom[i];
        b.style.height = "1px";
        b.style.overflow = "hidden";
        b.style.width = "auto";
        topborder.appendChild(b);
      }
      obj.appendChild(topborder);
      if (istop) obj.innerHTML+=HTML;
    }
  }

?

  相关解决方案