首页 > 网络编程 > JavaScript > javascript技巧 > 连续操作HTMLElement

连续操作HTMLElement对象图文解决方法

2008-03-13 21:15:10 作者：

Object.prototype.***不能用作在HTMLElement对象上，如本后面的抓图所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script language="javascript" type="text/javascript"> 
var JObj = {}; 
(function($){  
 $.$ = function(p){ 
  var obj = typeof(p) == "object" ? p : document.getElementById(p); 
  assignFn(obj); 
  return obj; 
 } 
  
 $.$appendTo = function(f,p){ 
  var obj = p ? $.$(p) : this; 
  $.$(f).appendChild(obj); 
  assignFn(obj); 
  return obj; 
 }  
  
 $.$c = function(p,n){ 
  var obj; 
  try{ 
   obj = document.createElemnet("<" + p + " name='" + n + "'>"); 
  }catch(e){ 
   obj = document.createElement(p); 
   obj.name = name; 
  } 
  assignFn(obj); 
  return obj; 
 } 
  
 $.$att = function(k,v,p){ 
  var obj = p ? $.$(p) : this; 
  obj.setAttribute(k,v); 
  obj[k] = v; 
  obj.$att = $.$att; 
  assignFn(obj); 
  return obj; 
 } 
  
 $.$css = function(k,v,p){ 
  var obj = p ? $.$(p) : this; 
  obj.style[k] = v; 
  obj.$css = $.$css; 
  assignFn(obj); 
  return obj; 
  } 
  
 var fv = function(){ 
  var f="-1",n=navigator; 
  if (n.plugins && n.plugins.length) { 
   for (var ii=0;ii<n.plugins.length;ii++) { 
    if (n.plugins[ii].name.indexOf('Shockwave Flash')!=-1) { 
     f=n.plugins[ii].description.split('Shockwave Flash ')[1]; 
     break; 
    } 
   } 
  } else if (window.ActiveXObject) { 
   for (var ii=10;ii>=2;ii--) { 
    try { 
     var fl=eval("new ActiveXObject('ShockwaveFlash.ShockwaveFlash."+ii+"');"); 
     if (fl) { f=ii + '.0'; break; } 
    }catch(e) {} 
   } 
  } 
  
  if(f == "-1") return f; 
  else return f.substring(0,f.indexOf(".")+2)    
 } 
  
 $.browser = {}; 
 (function($){ 
  //Notice : Firefox ,NS can't use property: name (case sensitive)! Because it's a hold field ,and it's values is anonymous. 
  var n_ = navigator,s_ = screen; 
   
  var b = n_.appName; 
  var ua = n_.userAgent.toLowerCase(); 
   
  $.Name = "Unknow"; 
  $.safari = ua.indexOf("safari")>-1;  // always check for safari & opera 
  $.opera = ua.indexOf("opera")>-1;    // before ns or ie 
  $.firefox = ua.indexOf('firefox')>-1; // check for gecko engine  
  $.ns = !$.firefox && !$.opera && !$.safari && (b=="Netscape"); 
  $.ie = !$.opera && (b=="Microsoft Internet Explorer"); 
   
  $.Name = ($.ie ? "IE" : ($.firefox ? "Firefox" : ($.ns ? "Netscape" : ($.opera ? "Opera" : ($.safari ? "Safari" : "Unknow"))))); 
   
  switch($.Name){ 
   case "Opera": 
    $.fullVersion = ua.substr(ua.indexOf("opera") + 6); 
    break; 
   case "IE": 
    $.fullVersion = ua.substr(ua.indexOf("msie") + 5).split(";")[0]; 
    break; 
   case "Firefox": 
    $.fullVersion = ua.substr(ua.indexOf("firefox") + 8); 
    break; 
   case "Safari": 
    $.fullVersion = ua.substr(ua.indexOf("version") + 8).split(" ")[0]; 
    break; 
   case "Netscape": 
    $.fullVersion = ua.substr(ua.indexOf("netscape") + 9); 
    break; 
   default: 
    $.fullVersion = "-1"; 
  } 
  $.version = parseFloat($.fullVersion); 
 })($.browser); 
   
 var fn = {}; 
 (function($,$$){ 
  var o; 
  for(o in $$){ 
   if(eval("$$." + o) instanceof Function) 
    $[o] = o; 
  } 
 })(fn,$); 
  
 var assignFn = function(p){ 
  if(!p) return; 
  var o; 
  for(o in fn){ 
   p[o] = $[o]; 
  } 
 } 
})(JObj); 
</script> 
</head>

<body> 
</body> 
</html> 
<script language="javascript" type="text/javascript"> 
var width = 200; 
var height = 200; 
var oOutline = JObj.$c("DIV").$appendTo(document.body).$css("width",width + "px").$css("height",height + "px").$att("class","oOutline").$att("className","oOutline").$css("backgroundColor","#cc6600"); 
alert(JObj.browser.Name + " " + JObj.browser.fullVersion) 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]