您是否可以动态创建IMG元素,并使用document.GetElementById(name)访问它;

时间:2018-06-06 14:48:12

标签: javascript html nw.js

这是我的代码,问题出在ldimg();和img(); ldimg();创建图像元素,img();得到它,但我的alert()调试测试说无法读取null源。

'element/id/class:contains("I WANT THIS ONE")'

2 个答案:

答案 0 :(得分:1)

如果您不打算将其添加到DOM,您可以重新构建代码以从ldimg返回图像。

function ldimg(src, name) {
    var imageObj = document.createElement('img');
    imageObj.onload = function() {
        context.drawImage(imageObj, window.innerWidth + 100, window.innerHeight + 1, 1, 1);
    };
    imageObj.src = src;
    imageObj.id = name;
    return imageObj;
}

function img(image, x, y, width, height) {
    alert(image.src);
}
var theImg = ldimg('bot.png', 'bot');

function Loop() {
    setTimeout(function() {
        img(theImg, 100, 100, 100, 100);
        Loop();
    }, 16);
}
Loop();
</script> 
</html>

答案 1 :(得分:0)

您需要将图像添加到DOM结构中。为此,您可以使用appendChild,如下例所示:

function ldimg(src, name) {
    var imageObj = document.createElement('img');
    imageObj.src = src;
    imageObj.id = name;
    var imageDiv = document.getElementById("imgDiv");
    imageDiv.appendChild(imageObj);
}

function img(name, x, y, width, height) {
    var image = document.getElementById(name);
    alert(image.src);
}
ldimg('http://thecatapi.com/api/images/get?format=src&type=gif', 'bot');
<div id="imgDiv"></div>

此外,您设置的setTimeout应该是setInterval,这样您就不必在其内部调用函数。在下面的示例中,我有setInterval,间隔为10秒,使其稍微不那么恼人:

function ldimg(src, name) {
    var imageObj = document.createElement('img');
    imageObj.src = src;
    imageObj.id = name;
    var imageDiv = document.getElementById("imgDiv");
    imageDiv.appendChild(imageObj);
}

function img(name, x, y, width, height) {
    var image = document.getElementById(name);
    alert(image.src);
}
ldimg('http://thecatapi.com/api/images/get?format=src&type=gif', 'bot');

function Loop() {
    setInterval(function() {
        img('bot', 100, 100, 100, 100);
    }, 10000);
}
Loop();
<div id="imgDiv"></div>