Получить доступ к стилю объекта

[evgeniyfill82]

var tr1 = {
	name: '1a',
	obj: pole.innerHTML = "<img src='1a.png' class='obj'>",
	x: 100,
	y: 200
}
tr1.obj.style.top = 300 +'px';

( .obj { position: absolute; } )

Не могу сдвинуть картинку. Говорит, что нет такого объекта.
Не факт, что так должно работать, просто пытаюсь вспомнить проект, исходники которого утеряны.
Как сделать, чтобы можно было обращаться к объекту tr1 с его картинкой на экране?

[рони]

evgeniyfill82,

pole.innerHTML = "<img src='1a.png' class='obj'>"
 var tr1 = {
  name: '1a',
  obj: pole.querySelector('.obj'),
  x: 100,
  y: 200
}
tr1.obj.style.top = 300 +'px';

[evgeniyfill82]

Блин, я в .hta все это вояю. Там говорит, что не поддерживает такой метод. Переименовал в html, там работает. Видимо надо под какой-то старый IE чтобы шло. (уже сталкивался, что в hta не все проканывает что должно)

И второй вопрос. Цель в том, чтобы можно было создать например 100 tr1 объектов, управлять ими интервале, удалять и снова добавлять. Нельзя сделать, чтобы innerHTML был где-то прямо в объекте? Для удобства.
Навроде того:

var obs = [];
var tr1 = { ... }
obs.push(tr1 = {name: '2a'});
obs.push(tr1 = {name: '3a'});
obs.push(tr1 = {name: '4a'});
alert(obs[2].name);
delete glb.obs[1];
if (obs[1]) alert(obs[1].name);

[evgeniyfill82]

Вроде бы вспомнил как примерно я это раньше на jquery исполнял. Но хотелось бы сделать все на яве для экономии ресурсов, потому как от 50и объектов в обработке начинаются притормаживания, может быть это бы помогло.

var glb = {};
glb.obs = [];
glb.sss = 0;

function getTr(prm){
	var tr = {
		obj: $("<img src='1a.png' style='position:absolute;'>").appendTo("#pole"),
		x: prm.x,
		y: prm.y,
		u: prm.u,
		vid: 'none',
		liv: 20
	}
	return tr;
}

var vrm = setInterval(function(){ gmm(); }, 100);

function gmm(){
	if (glb.sss == 5) glb.sss = 0;
	if (glb.sss == 0) 
	glb.obs.push(getTr({x:100, y:200, u:1}));
	for(i=0;glb.obs.length>i;i++) if (glb.obs[i]) {
		glb.obs[i].x += 10;
		glb.obs[i].y += 10;
		glb.obs[i].u += 10;
		glb.obs[i].liv--;
		glb.obs[i].vid = 'block';
		
		glb.obs[i].obj.css({ 
			'transform': 'rotate('+ glb.obs[i].u +'deg)', 
			'top': glb.obs[i].x +'px', 
			'left': glb.obs[i].y +'px',
			'display': glb.obs[i].vid
		});
		if (glb.obs[i].liv == 0) {
			glb.obs[i].obj.remove();
			delete glb.obs[i];
		}
	}
	glb.sss++;
}

Однако с rotate в .hta похоже будут непреодолимые сложности. А так хотелось запилить игруху чтобы с компа работала, безо всяких хостингов. Можно и так конечно html-ку запускать, но данные никакие не сохранишь.

[рони]

evgeniyfill82,
в вашем браузере нет querySelector
тогда можно так childNodes

pole.innerHTML = "<img src='1a.png' class='obj'>"
 var tr1 = {
  name: '1a',
  obj: pole.childNodes[0],
  x: 100,
  y: 200
}
tr1.obj.style.top = 300 +'px';

или создавайте картинку

var img = new Image();
 img.src = '1a.png'
 img.className = 'obj';
 pole.appendChild(img);
 var tr1 = {
  name: '1a',
  obj: img,
  x: 100,
  y: 200
}
tr1.obj.style.top = 300 +'px';

[evgeniyfill82]

рони,
я не совсем понимаю как именно использовать ваш пример в моем, описанном в последнем сообщении.

[рони]

evgeniyfill82,

function getTr(prm){
  var img = new Image();
 img.src = '1a.png'
 img.className = 'obj';
 img.style.position ='absolute'
 pole.appendChild(img);
  var tr = {
    obj: img,
    x: prm.x,
    y: prm.y,
    u: prm.u,
    vid: 'none',
    liv: 20
  }
  return tr;
}

[evgeniyfill82]

рони,
пардон, я ответил раньше вашего дополнения к сообщению. с дополнением да, все работает без jquery. Спасибо.

var glb = {};
glb.obs = [];
glb.sss = 0;

function getTr(prm){
	var img = new Image();
	img.src = '1a.png'
	img.className = 'obj';
	pole.appendChild(img);
	var tr1 = {
		name: '1a',
		obj: img,
		x: prm.x,
		y: prm.y,
		u: prm.u,
		vid: 'none',
		liv: 20
	}
	return tr1;
}

var vrm = setInterval(function(){ gmm(); }, 100);

function gmm(){
	if (glb.sss == 3) glb.sss = 0;
	if (glb.sss == 0) 
	glb.obs.push(getTr({x:10, y:10, u:1}));
	for(i=0;glb.obs.length>i;i++) if (glb.obs[i]) {
		glb.obs[i].x += 10;
		glb.obs[i].y += 10;
		glb.obs[i].u += 10;
		glb.obs[i].liv--;
		glb.obs[i].vid = 'block';
		
		glb.obs[i].obj.style.top = glb.obs[i].x +'px';
		glb.obs[i].obj.style.left = glb.obs[i].y +'px';
		glb.obs[i].obj.style.display =glb.obs[i].vid;
		if (glb.obs[i].liv == 0) {
			glb.obs[i].obj.parentNode.removeChild(glb.obs[i].obj);
			delete glb.obs[i];
		}
	}
	glb.sss++;
}

[рони]

evgeniyfill82,
Object.keys возможно опять нет -- тогда for in

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<div id="pole"></div>
 <script>
var glb = {};
glb.obs = [];
glb.sss = 0;

function getTr(prm){
  var img = new Image();
 img.src = 'http://paar.com.au/images/star95x72.png'
 img.className = 'obj';
 img.style.position ='absolute'
 pole.appendChild(img);
  var tr = {
    obj: img,
    x: prm.x,
    y: prm.y,
    u: prm.u,
    vid: 'none',
    liv: 20,
    css : function(data) {
    Object.keys(data).forEach(function (key) {
 img.style[key] = data[key]

});

}
  }
  return tr;
}

var vrm = setInterval(function(){ gmm(); }, 100);

function gmm(){
  if (glb.sss == 5) glb.sss = 0;
  if (glb.sss == 0)
  glb.obs.push(getTr({x:100, y:200, u:1}));
  for(i=0;glb.obs.length>i;i++) if (glb.obs[i]) {
    glb.obs[i].x += 10;
    glb.obs[i].y += 10;
    glb.obs[i].u += 10;
    glb.obs[i].liv--;
    glb.obs[i].vid = 'block';

    glb.obs[i].css({
      'transform': 'rotate('+ glb.obs[i].u +'deg)',
      'top': glb.obs[i].x +'px',
      'left': glb.obs[i].y +'px',
      'display': glb.obs[i].vid
    });
    if (glb.obs[i].liv == 0) {
      glb.obs[i].obj.remove();
      delete glb.obs[i];
    }
  }
  glb.sss++;
}

 </script>
</body>
</html>

[рони]

evgeniyfill82,
удаление не корректировал!