Question

我想在鼠标滚轮上使用javascript获取我的img的id但是当我执行getElementById时它告诉我长度为null

这是我放置img

的功能

function parse_data(data)
{
 var json = data;
 var obj = JSON.parse(json);
 var buff = "";

 for(var i in obj)
 {
  //document.write('<br>' + i + '<br>');                                                                                                                                                                                                 
  for (var j in obj[i])
  {
        if (obj[i][j] == true)
          buff += "<a href=\"#\" onmousewheel=\"test()\" ><img id=\"obj[i]\" src=\"../images/pix_green.jpg\" border=\"0\" /></a>";
        else
          buff += "<a href=\"#\" onmousewheel=\"test()\" ><img id=\"obj[i]\" src=\"../images/pix_gray.jpg\" border=\"0\" /></a>";
  }
    buff += "<br>";
 }
  document.getElementById('frisekk').innerHTML = buff;
}

这就是我想在鼠标滚轮上取回img id的功能

function test()
{
  var obj = document.getElementById('img');

  alert(obj.length); //obj.length is null...
  if (event.wheelDelta >= 120)
    unit -= 60;
  else
    unit += 60;
 request(readData);
}

我怎么能得到我的img的id？

有所有的HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Techniques AJAX - XMLHttpRequest</title>
<script>
 var unit = 60;
 var date = 'Mon Oct 20 2014 19:25:00 GMT (CET)';

 function request(callback)
 {
  var xhr = getXMLHttpRequest();
  var frise = 600;
  var template = 'lab';

  xhr.onreadystatechange = function()
  {
   if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
    callback(xhr.responseText);
  };

  xhr.open("GET", "a.php?Frise=" + frise + "&Unit=" + unit + "&Template=" + template + "&Date=" + date, true);
  xhr.send(null);
}

function readData(sData)
{
 parse_data(sData);
}

function parse_data(data)
{
 var json = data;
 var obj = JSON.parse(json);
 var buff = "";
 for(var i in obj)
 {
   //document.write('<br>' + i + '<br>');                                                                                                                                                                                                                                                                                                
   for (var j in obj[i])
   {
      //document.write(j + "=" + obj[i][j] + '<br>');                                                                                                                                                                                                                                                                                   
      if (obj[i][j] == true)
        buff += "<a href=\"#\" onmousewheel=\"test()\" ><img id=\"obj[i]\" src=\"../images/pix_green.jpg\" border=\"0\" /></a>";
      else
        buff += "<a href=\"#\" onmousewheel=\"test()\" ><img id=\"obj[i]\" src=\"../images/pix_gray.jpg\" border=\"0\" /></a>";
    }
   buff += "<br>";
  }
  document.getElementById('frisekk').innerHTML = buff;
}

function test()
{
 var obj = document.getElementById('img');
 alert(obj.length);
 if (event.wheelDelta >= 120)
   unit -= 60;
 else
   unit += 60;
 request(readData);
}

</script>


<script>
function getXMLHttpRequest()
{
 var xhr = null;
 if (window.XMLHttpRequest || window.ActiveXObject) {
   if (window.ActiveXObject)
   {
     try 
     {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
     } 
     catch(e)
     {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
    } 
    else 
    {
      xhr = new XMLHttpRequest();
    }
   }
   else 
   {
    alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
    return null;
   }
  return xhr;
 }
</script>
<span id="frisekk"> <br/> </span>
</head>
<body>
<form>
<p>
<input type="button" onclick="request(readData);" value="Exécuter" />
</p>
</form>
</body>
</html>

Answer 1

document.getElementById没有为您获取 id ，它通过id获取元素。由于您没有发布HTML，因此我无法确定您的<img />代码是否具有img的ID，但我假设没有。您正在寻找的是document.getElementsByTagName('img')来获取页面上的tevery img元素，然后使用循环查找您需要的元素（如果您知道只有一个选择第一个元素，则添加[0] ）。

所以你有两个选择：

为您的元素添加ID（最佳选项）

<img src="path/to/image.jpg" id="my_image" /> var finalElement = document.getElementById("my_image");

找到标记名为“img”的所有元素，然后在

<img src="path/to/image.jpg" /> var elements = document.getElementsByTagName("img"); var finalElement = false; for(var i = elements.length -1; i >= 0; i--){ // match your element and return if(/* criteria */){ finalElement = elements[i]; break; } }

您的网页上只有一张图片并选择：

<img src="path/to/image.jpg" id="my_image" /> var finalElement = document.getElementsByTagName("img")[0];

更新

您的onmousewheel属性可能受支持，但之后您需要略有不同，因为您的链接包含onmousewheel事件。

<!-- add the 'this' keyword to your test() function to pass the <a> element -->
<a href="#" onmousewheel="test(this)"><img src="path/to/image.jpg" /></a>

使用此结构（一个<img>嵌套在<a>中），您可以使用<a>关键字将this传递给该函数。

/* Add a variable to receive your <a> in your test() function. */
function test(link){
    /* Use childNodes[0] to select the first child element of the a. */
    var image = link.childNodes[0];
    /* Will alert '1' if the <a> has a child, will alert '0' if the <a> is empty.*/
    alert(image.length);
}

现在，您可以轻松访问元素，图像的唯一子元素，并使用该元素执行某些操作。

我不确定onmousehweel是否支持某个元素，因此pelase会考虑使用onclick或onmouseover来测试此函数。如果您决定使用onmouseover进行测试，请使用console.log来记录而不是alert，否则您将陷入警报状态。

Answer 2

你不能在函数调用中解析id吗？例如：

onmousewheel=test(obj[i])

和function,

function test(id)??

我无法在javascript中获取图片的ID

2 个答案:

更新