男人.No boy no cry

彪悍的人生，不需要解釋...

导航

取得特定格式下的文本的px宽度&给SELECT控件的“请选择”两边加若干“-”

Posted on 2005-09-15 15:14  Piccolo Goo  阅读(443)  评论(0)    收藏  举报

<html>
<head>
<script language="Jscript">
/// <summary>
/// 取得特定格式下的文本的px宽度。 Created by Aaron Yang 2005-09-13
/// </summary>
/// <param name="p_strText">文本</param>
/// <param name="p_strTextStyleString">文本的格式字符串，例如："font-size:9pt;font-family:Arial"。</param>\
/// <returns>所给文本在所指定的格式下的宽度，以px为单位</returns>
function GetTextLengthInPX(p_strText, p_strTextStyleString)
{
 var objTextContainer = document.getElementById("TextContainer"); //用于测量文本宽度的临时容器
      try
      {
  var strContainerHTML = "<table style='visibility:hidden' cellpadding='0' cellspacing='0' border='0'><tr><td id='TextContainer' style='" + p_strTextStyleString + "' nowrap></td><tr></table>";
          var objOriginDiv = document.createElement("<div>");
          objOriginDiv.innerHTML = strContainerHTML;
          alert(objOriginDiv)
          document.body.appendChild(objOriginDiv);
          alert('s1')
          
          if (objTextContainer == null)    //如果原来不存在TextContainer则直接引用document.all.TextContainer对象
  {
   objTextContainer = document.all.TextContainer;
  }
          else                             //如果原来存在TextContainer则通过加下标的方式引用新增的TextContainer对象
          {
                objTextContainer = document.all.item("TextContainer", document.all.item("TextContainer").length - 1);
          }
          
          objTextContainer.innerText = p_strText;
          var objRect = objTextContainer.getBoundingClientRect();
          
          var intTextWidth = objRect.right - objRect.left;
          document.body.removeChild(objOriginDiv);  //删除这个函数中临时创建的element
         return intTextWidth;
        }
 catch(e)
      {
  return 0;
      }
}

/// <summary>
/// 给SELECT控件的“请选择”两边加若干“-”。 Created by Aaron Yang 2005-09-13
///      假定SELECT控件的第一项为“请选择”、“请选择表单”、“Please Select”等等诸如此类，
///      把例如“请选择”变成“-----请选择-----”以填满整个SELECT的宽度。
///      调用GetTextLengthInPX函数。
/// </summary>
/// <param name="p_strSelectObjName">SELECT控件的“NAME”或“ID”属性</param>
function AddBarToPleaseSelect(p_strSelectObjName)
{
 var intDropDownWidth = 25;  //SELECT控件的下拉按钮的宽度
 var strTextStyleString="";  //文本的格式字符串
 var objSelect = document.all(p_strSelectObjName);                     //SELECT控件对象
      var intSelectWholeWidth = parseInt(objSelect.currentStyle.width);      //整个SELECT控件的宽度
      var strPleaseSelect = objSelect.options[0].text;                      //请选择文本

 //拼装文本格式字符串，只包含影响文本Render宽度的属性
 strTextStyleString = strTextStyleString + "font-family:" + objSelect.currentStyle.fontFamily + ";";
      strTextStyleString = strTextStyleString + "font-size:" + objSelect.currentStyle.fontSize + ";";
 strTextStyleString = strTextStyleString + "font-style:" + objSelect.currentStyle.fontStyle + ";";
 strTextStyleString = strTextStyleString + "font-weight:" + objSelect.currentStyle.fontWeight + ";";
 strTextStyleString = strTextStyleString + "font-variant:" + objSelect.currentStyle.fontVariant + ";";
 strTextStyleString = strTextStyleString + "letter-spacing:" + objSelect.currentStyle.letterSpacing + ";";
 strTextStyleString = strTextStyleString + "word-spacing:" + objSelect.currentStyle.wordSpacing + ";";
 strTextStyleString = strTextStyleString + "text-transform:" + objSelect.currentStyle.textTransform + ";";
      
      var intPleaseSelectWidth = GetTextLengthInPX(strPleaseSelect, strTextStyleString);       //请选择文本的px宽度
      var intBarCharWidth  = GetTextLengthInPX("-", strTextStyleString);                       //请选择文本的px宽度
      var intBarCharCountOneSide = parseInt((intSelectWholeWidth - intDropDownWidth - intPleaseSelectWidth) / 2 / intBarCharWidth);//单边待加的“-”数

      for (var i = 0; i < intBarCharCountOneSide; i++)
      {
         strPleaseSelect = "-" + strPleaseSelect + "-";
      }
 
 strPleaseSelect = strPleaseSelect + "--"; //填补两边各不足一个“-”宽的空间
      objSelect.options[0].text = strPleaseSelect;
}
alert('ss')

</script>
</head>
<body onload="alert(GetTextLengthInPX('111111111111111','font-size:90pt;font-family:Arial'))">
  sds
</body>
</html>