Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как отобразить объект? (https://javascript.ru/forum/dom-window/57781-kak-otobrazit-obekt.html)

tracerzzz 19.08.2015 13:47
Как отобразить объект?
 
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
	<title>Вот так вот </title>
</head>
<body>
<style type="text/css">
   #element { 
	width: 800px;
	height: 500px;
    padding: 50px;
    border: solid 5px black; 
    margin: 5% 5%;
	position: relative;	
}
	
   .alert {
    width: 180px;
	height: 150px;
    border: solid 3px black; 
    position: absolute;
	left: 10px;
	top: 400px;
 margin: 5px;
 }
  </style> 
    <div id="element">	 	
<input style="width:70px;height:70px; margin: 1px 700px"; type="image" src="add.png"  name="myButton"  onclick="add()" id=""  />	
	
<script type="text/javascript">

 function add() {
 var image= {
  className : "alert",
  id : "qwe",
  innerHTML:"<img src="1.jpg" style=height:100%; width:100%; >",
  }
}
</script>
</div>
</body>
</html>

Как отобразить объект image в блоке в блоке div?

рони 19.08.2015 13:58
tracerzzz,
и что должно получится?

tracerzzz 19.08.2015 14:12
Что бы отобразить объект с свойствами 
.alert {
    width: 180px;
	height: 150px;
    border: solid 3px black; 
    position: absolute;
	left: 10px;
	top: 400px;
 margin: 5px;
 }

В котором будет картинка
innerHTML:"<img src="1.jpg" style=height:100%; width:100%; >",


Нужно что бы при нажатии каждом на кнопку, добавлялся новый объект в блок <div id="element"> который будет отображать картинку.

рони 19.08.2015 14:25
tracerzzz,
:-? вы результат в html напишите того что будет после нажатия.

рони 19.08.2015 14:28
tracerzzz,
может тут чего почитать https://learn.javascript.ru/modifying-document
и так на всякий внутри двойных кавычек идут ординарные

tracerzzz 19.08.2015 14:44
Спасибо, исправил кавычки.
Мне нужно следующее:
Создать объект image, у которого будет метод конструктор, который создаёт объект связанный с HTML элементом element.
Что бы при нажатии на кнопку добавить создавался объект (картинка 1, картинка 2 и т.д.).

Я попробовал сделать так

var div = document.createElement('div');
div.className = "alert";
div.innerHTML:"<img src="1.jpg" style=height:100%; width:100%; >",


Далее что бы отобразить:

document.getElementById("element").appendChild(div);

Визуально получилось.

Но по условию нужно создать свой объект, с методами.

рони 19.08.2015 14:59
tracerzzz,
function add() {
    var image = {
        className: "alert",
        id: "qwe",
        innerHTML: "<img src='1.jpg' style='height:100%; width:100%;' >"
    };
    var div = document.createElement("div");
    for (var k in image) div[k] = image[k];
    document.querySelector("#element").appendChild(div)
};

tracerzzz 19.08.2015 15:33
Спасибо, подскажите пожалуйста если я задаю свойство style.width: "999px",

var image = {
        className: "alert",
        id: "qwe",
        style.width: "999px",
        innerHTML: "<img src='1.jpg' style='height:100%; width:100%;' >"
    };


не работает, как правильно это сделать?

рони 19.08.2015 15:58
tracerzzz,
function forIn(elem, obj) {
    for (var k in obj) typeof obj[k] == "string" ? elem[k] = obj[k] : forIn(elem[k], obj[k]);
    return elem
}

function add() {
    var image = {
        className: "alert",
        id: "qwe",
        innerHTML: "<img src='1.jpg' style='height:100%; width:100%;' >",
        style: {
            width: "999px",
            border: "5px solid red"
        }
    };
    var div = document.createElement("div");
    div = forIn(div, image);
    document.querySelector("#element").appendChild(div)
};

tracerzzz 19.08.2015 16:28
Спасибо большое.


Часовой пояс GMT +3, время: 04:01.