我试图用 javascript 编写一个简单的可变长度列表，它可以通过 onmouseout 和 onmouseover 等简单事件快速生成。该代码在 Google chrome 中运行良好，但在 Internet Explorer 8.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>
重要的方法是 createList(args) 和 removeList(args)。辅助方法是 colorChange() 和 getPixelSize(args) 和 getPercent(args)
可以在 Internet Explorer 8 中复制粘贴和检查此代码。当用户将光标移入和移出单元格时，它会下拉列表但不会突出显示其各个单元格。它在谷歌浏览器中运行良好。
当我检查时，我从“查看源代码”选项中的代码中发现，本应采用 id='idvalue' 格式的动态生成元素的 id 而不是 id=idvalue 格式，其中他们周围没有引号。这只发生在 Internet Explorer 中，而不是在 Google Chrome 中。此 ID 的设置格式为
elem.id=id;
...来自代码。
我也尝试过以下格式:
elem.setAttribute("id",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);
关于javascript - HTMLElement.id 在 Internet Explorer 8 中不能正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23526415/