Javascript HtmleElement.id在Internet Explorer 8中无法正常工作_Javascript_Html_Css_Internet Explorer_Google Chrome

Javascript HtmleElement.id在Internet Explorer 8中无法正常工作

javascript html css internet-explorer google-chrome

Javascript HtmleElement.id在Internet Explorer 8中无法正常工作,javascript,html,css,internet-explorer,google-chrome,Javascript,Html,Css,Internet Explorer,Google Chrome,我试图用javascript编写一个简单的可变长度列表，它可以由onmouseout和onmouseover等简单事件快速生成。该代码在Google chrome中运行良好，但在InternetExplorer8.0中运行不好，我能够在javascript中找到一行代码，上面写着 elem.id = id; 代码如下： <html> <head> <title>Testing codes</title> <meta charset="UT

我试图用javascript编写一个简单的可变长度列表，它可以由onmouseout和onmouseover等简单事件快速生成。该代码在Google chrome中运行良好，但在InternetExplorer8.0中运行不好，我能够在javascript中找到一行代码，上面写着

elem.id = id;

代码如下：

<html>

<head>
<title>Testing codes</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">




<script type="text/javascript">

/**
* @param {String} str The string in consideration
* @param {String} endItem The string to check for at the end of <code>str</code>
* @return true if the variable <code>str</code> ends with variable <code>endItem</code>
*/
function endsWith( str,endItem ){

if(typeof str === "string" && typeof endItem === "string" ){
        var len = str.length;
        var otherLen = endItem.length; 
    if( len === otherLen ){
        return str === endItem;
    }
    else if( len < otherLen ){
        return false;
    }
    else{
        return str.indexOf(endItem, len-otherLen) !== -1;
    }
}
else{
    return false;
}
return false;

 }//end function


/**
 * @param {Integer} obj
 * returns the pixel number
 * without the px unit
 */
function getPixelSize(obj){
var i = obj.indexOf("px", 0);
return parseInt( obj.substr(0, i) , 10);
}
/**
 * @param {Integer} obj
 * returns the pixel number
 * without the px unit
 */
function getPercent(obj){
var i = obj.indexOf("%", 0);
return parseInt( obj.substr(0, i) , 10);
}

/**
 * 
 * @param {String} id The id if the element whose color is to be changed
 * @param {String} color The new color
 * @returns {void}
 */
function colorChange(id,color){
var element = document.getElementById(id);
    //alert('id='+id+',element='+element);
element.style["background"] = color;
} 

 function getParent (id) {
var elem = document.getElementById(id);
        var parentElem = elem.parentElement;
        if (!parentElem) {
            parentElem = elem.parentNode;
        }

return parentElem;
    }
/**
 * 
 * @param {String} id The id of the element whose parent we need.
 * @returns the parent element (not the id)
 */
function getParentElement(id){
var div = document.getElementById(id);
return div.offsetParent;
}
/**
 * 
 * @param {HTMLElement} element The element whose right side
 * coordinates we need.
 * The value is returned in the same units as its left, either in px or %.
 *  CAUTION: Both the width and the left side must have been styled in the same units
 * for this method to be of any use.        
 * @returns {the coordinates of the right side of the element}
 */
 function getRight(element){
 var left = element.style.left;
 var width = element.style.width;
 var isPixels = endsWith(left,'px');
 if(isPixels === endsWith(width,'px')){
 return isPixels?(getPixelSize(left)+getPixelSize(width))+"px":

 (getPercent(left)+getPercent(width))+"%";        
 }
 alert('left and width must have the same style units for this method to work!');
 return null;

 }

 /**
  * 
  * @param {String} listID The id of the list to be removed.
  */
 function removeList(listID){
 var list = document.getElementById(listID);
 var body = document.getElementsByTagName("body")[0];
 if(list){
 body.removeChild(list);
 }
 }
 /**
  * @param {HTMLElement} element The element that spawns this list.
  * @param {Array} values An array containing the text values to be displayed in the      
  * cells of the list.
  * @param {Array} links An array containing the links that are navigated to when any     
  * cell is clicked.Its size must be the same as that of the
  * <code>values</code> array.
  * @param {String} fgColor The color used to display the text in each cell.
  * @param {String} bgColor The color of the list's background.
  * @param {String} linesColor The color used to paint the borders.
  * @returns {String} the innerhtml value of the list.
  */
 function createList(element,values,links,fgColor,bgColor,linesColor){
 alert(navigator.appVersion);

 if(links.length!==values.length){
 return;
 }
 var listContainer;
 //The id of the container of the list...i,e the box that holds the list.
 var id = element.id+"_list";
 var top = element.style.top;
 var left = element.style.left;
 var width = element.style.width;

 var body = document.getElementsByTagName("body")[0];

 if(document.getElementById(id)){
 listContainer=document.getElementById(id);
 body.removeChild(listContainer);
 }
 listContainer=document.createElement("div");







 top = endsWith(top+"","px")?getPixelSize(top+"")+"px":getPercent(top+"")+"%";
 left = endsWith(left+"","px")?getPixelSize(left+"")+"px":getPercent(left+"")+"%";
 width = endsWith(width+"","px")?getPixelSize(width+"")+"px":getPercent(width+"")+"%";





    if(values.length>0){
 listContainer.setAttribute("id",id);




 listContainer.style.position="absolute";
 listContainer.style.borderColor=linesColor;
 listContainer.style.background=bgColor;
 listContainer.style.top=top;
 listContainer.style.left=getRight(element);
 listContainer.style.width=width;


 body.appendChild(listContainer);


 for(var i=0;i<values.length;i++){
   var $id = id+i;

   var cellDiv = document.createElement("div");

    cellDiv.setAttribute("id" , $id);

    cellDiv.style.position="relative";
    cellDiv.style["z-index"]="30";
    cellDiv.style['color']=fgColor;
    cellDiv.style.background="pink";
    cellDiv.style.borderColor=linesColor;
    cellDiv.style['font-weight']="bold";
    cellDiv.style.fontSize="small";
    cellDiv.style['border']="solid black";
    cellDiv.style['padding']="1px";
    cellDiv.style['margin']="0px";

    listContainer.appendChild(cellDiv);
    var onMouseOut = 'colorChange(\''+$id+'\',\''+bgColor+'\');';
    cellDiv.setAttribute('onMouseOut',onMouseOut);


    var onMouseOver = 'colorChange(\''+$id+'\',\'gold\');'; 

    cellDiv.setAttribute('onMouseOver',onMouseOver);
    var a = document.createElement('a');
    a.style.textDecoration="none";
    a.setAttribute("href",links[i]);
    a.appendChild(document.createTextNode(values[i]));

    cellDiv.appendChild(a);
    var onClick = 'removeList(this.parentNode.id);';
    cellDiv.setAttribute('onClick',onClick);




    }//end for loop

    }

    else{
    return;
    }
    }
    </script>
   </head>

    <body id="bodyOfAll" onclick="var divID='myDiv_list'; removeList(divID);">

    <div id="myDiv"

    style=
    "position:absolute;
     top:40%;
     left:30%;
     width:10%;
     border:solid;
     border-color:green;
     background:blue;
     color:white;"

  onmouseover="var div =document.getElementById('myDiv');createList(div,new Array
  ('Home','About Us','Bookworm Forum','Go to Practice Exams','Logout','Account      
  Settings'),
  new Array('../jsp/home.jsp','#','../jsp/chatforum.jsp','../jsp/exampage.jsp',
  '../jsp/logout.jsp','javascript:sendLogoutMessage();'),'green','#00FF00','#ADFF00');"   
  >
 Great! Cool apps! 
 </div>
 </body>
 </html>

重要的方法是createListargs和removeListargs。辅助方法是colorChange和getPixelSizeargs以及getPercentargs 此代码可以在Internet Explorer 8中进行复制粘贴和检查。当用户将光标移入和移出单元格时，它会下拉列表，但不会高亮显示单个单元格。它在Google Chrome中运行良好。当我选中时，我从view source选项中的代码中发现，动态生成的元素的id应该是id='idvalue'格式，而不是id=idvalue格式，周围没有引号。这只发生在Internet Explorer上，而不是在Google Chrome上。此ID的设置格式为元素id=id； …来自代码。我还尝试了以下格式：元素setAttributeid，id；同样，但是结果是一样的。

请问，这是我的密码吗？或者在Internet Explorer中是否有用于设置id的特殊格式？请注意，我没有使用jquery。

ID没有问题，这些行将无法按预期工作：

cellDiv.setAttribute('onMouseOut',onMouseOut);
cellDiv.setAttribute('onmouseOver',onMouseOver);

IE8忽略通过setAttribute添加的事件处理程序

改为设置属性：

(function(n,i){
  n.onmouseout  = function(){colorChange(i, bgColor);};
  n.onmouseover = function(){colorChange(i, 'gold');}
})(cellDiv,$id);

您真的应该使用jQuery。。。抱歉，太棒了@Dr.Molle，精彩现在可以了。但是我再次检查了视图源代码，发现id周围仍然没有引号。如：id=myDiv_list5而不是id='myDiv_list5'.…这可能是什么原因？这只发生在Internet Explorer中。不必关心视图源，这只是浏览器的错误表示。非常感谢。问题解决了..我想知道为什么IE的问题这么大。