質問
I was attempting to code a simple variable length list with javascript that can be quickly generated by simple events like onmouseout, and onmouseover. The code worked well in Google chrome but not in Internet Explorer 8.0 and I was able to track down the error to a line in the javascript that says.
https://stackoverflow.com/questions/23526415
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianelem.id = id;
Here is the code:
<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>
The vital methods are createList(args) and removeList(args). The helper methods are colorChange() and getPixelSize(args) and getPercent(args)
This code can be copy pasted and checked in Internet Explorer 8.It drops down the list but does not highlight its individual cells when the user moves the cursor in and out of the cells. It works well in Google Chrome.
When I checked, I discovered from the code in the "view source" option,that the ids of the dynamically generated elements which were supposed to be of the format id='idvalue', were instead of the format, id=idvalue, with no quotes around them. This happened only in Internet Explorer, not in Google Chrome. This ids were set with the format
elem.id=id;
...from the code.
I tried it with the format also:
elem.setAttribute("id",id);
also, but the results were the same.
Please, is it my code? or is there a special format for setting the id in Internet Explorer? and please I am not using jquery.
解決
There is nothing wrong with the IDs, these lines will not works as expected:
cellDiv.setAttribute('onMouseOut',onMouseOut);
cellDiv.setAttribute('onmouseOver',onMouseOver);
IE8 ignores event-handlers that have been added via setAttribute.
Set the properties instead:
(function(n,i){
n.onmouseout = function(){colorChange(i, bgColor);};
n.onmouseover = function(){colorChange(i, 'gold');}
})(cellDiv,$id);
