f_alert 在指定元素后面弹出错误信息

最新推荐文章于 2024-06-07 15:54:26 发布

原创最新推荐文章于 2024-06-07 15:54:26 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#F# #Opera #Safari #JavaScript #IE #ViewUI

javascript 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种在不同浏览器中获取指定HTML元素坐标的方法，并实现了一个基于该坐标的错误信息弹窗功能。该功能能够计算元素的绝对位置，并在元素附近显示提示信息。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

 
  
 </HEAD>

 <BODY>
	<input type="text" id="txt"   />sssssssssssssssssssssss
	<input type="text" id="txt5"   /><input type="text" id="txt33"   /><br/>
	<input type="text" id="txt6"   /><br/><br/><br/>
	<input type="text" id="txt2"   /> 
	 <select id="sss" >
		<option>sssssssss</option>
	 </select>
	<br/><br/>
	<input type="checkbox" name="chk" id="chk" />sdfsf

	<SCRIPT LANGUAGE="JavaScript">
		
		/**
		 * 获取元素的坐标点
		 * @param elementId 元素Id
		 * @returns 元素所在位置的坐标点
		 */	
		function getElementPos(elementId){
			
			//验证浏览器类型
			var ua = navigator.userAgent.toLowerCase(); 
			var isOpera = (ua.indexOf('opera')!=-1); 
			var isIE = (ua.indexOf('msie')!=-1&&!isOpera);
		
			
			//获取元素
			var el = document.getElementById(elementId); 
			if(el.parentNode === null || el.style.display == 'none') { 
				return false; 
			}
 
			var parent=null; 
			var pos=[]; 
			var box;
			

			//如果浏览器是IE
			if(el.getBoundingClientRect) {
				
				box = el.getBoundingClientRect(); 

				var scrollTop  = Math.max(document.documentElement.scrollTop,document.body.scrollTop); 
				var scrollLeft = Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
				
				return {
					x:box.left+scrollLeft,y:box.top+scrollTop
				}; 
			} else if(document.getBoxObjectFor) {  // gecko  
				
				box=document.getBoxObjectFor(el); 

				var borderLeft=(el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
				var borderTop=(el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
				
				pos=[box.x-borderLeft,box.y-borderTop];
			}else{	// safari & opera
			 
				pos=[el.offsetLeft,el.offsetTop]; 
				parent=el.offsetParent; 

				if(parent!=el){
					while(parent){
						
						pos[0]+=parent.offsetLeft;
						pos[1]+=parent.offsetTop;
						parent=parent.offsetParent;
					}
				}

				if(ua.indexOf('opera')!=-1||(ua.indexOf('safari')!=-1&&el.style.position=='absolute')){
					
					pos[0]-=document.body.offsetLeft;
					pos[1]-=document.body.offsetTop;
				}
			}


			if(el.parentNode){
				parent=el.parentNode;
			}else {
				parent=null;
			}


			while(parent&&parent.tagName!='BODY'&&parent.tagName!='HTML'){
				// account for any scrolled ancestors   
				pos[0]-=parent.scrollLeft;
				pos[1]-=parent.scrollTop;
				
				if(parent.parentNode){
					parent=parent.parentNode;
				}else {
					parent=null; 
				} 
			}
			return {
				x:pos[0],y:pos[1]
			};
		}
	
		
		/**
		 * 弹出错误信息
		 * @param elementId 元素Id
		 * @param errorMsg 错误信息
		 * @returns 元素所在位置的坐标点
		 */	
		function f_alert(elementId , errorMsg){
			//获取元素、元素类型
			var _el = document.getElementById(elementId);
			var _el_type = _el.type ;
			 
			//计算元素宽度
			var _el_width = 0 ;
			if(_el_type == "text") {
				_el_width = _el.size ;
			}else {
				_el_width = _el.style.width ;  
			}

			//获取元素坐标
			var _point = getElementPos(elementId); 

			//计算div显示位置
			var _left = parseInt(_el_width) * 8 +　_point.x - 8 ;
			var _top = _point.y - 3  ;
			
			//拼出DIV
			var _strDiv = "<div  onclick='javascript:{this.style.display=\"none\";}' "
			_strDiv += "style='color: red ;background-color: #FFFEBB;position: absolute;font-size: 12px;height: 22px;";
			_strDiv += "border: 1px solid #ff3300;padding-top: 4px;padding-left: 4px;padding-right: 4px;z-index: 1002;overflow: auto;";
			_strDiv += "left:"+_left+"px;top:"+_top+"px;' >"
			_strDiv += errorMsg ;
			_strDiv += "</div>" ;

			document.write(_strDiv);

		}

			 
		f_alert("txt5","aaaaaaaaa");
		//f_alert("txt5","请输入嗷嗷嗷");
		//f_alert("chk","aaaaaaaaa");

  //-->
  </SCRIPT>
 </BODY>
</HTML>