19.08.2015, 13:47
|
|
Интересующийся
|
|
Регистрация: 02.05.2015
Сообщений: 10
|
|
|
Как отобразить объект?
<!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?
Последний раз редактировалось tracerzzz, 19.08.2015 в 14:23.
|
|
19.08.2015, 13:58
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,080
|
|
|
tracerzzz,
и что должно получится?
|
|
19.08.2015, 14:12
|
|
Интересующийся
|
|
Регистрация: 02.05.2015
Сообщений: 10
|
|
Что бы отобразить объект с свойствами
.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"> который будет отображать картинку.
Последний раз редактировалось tracerzzz, 19.08.2015 в 14:23.
|
|
19.08.2015, 14:25
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,080
|
|
tracerzzz,
 вы результат в html напишите того что будет после нажатия.
|
|
19.08.2015, 14:44
|
|
Интересующийся
|
|
Регистрация: 02.05.2015
Сообщений: 10
|
|
Спасибо, исправил кавычки.
Мне нужно следующее:
Создать объект 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);
Визуально получилось.
Но по условию нужно создать свой объект, с методами.
Последний раз редактировалось tracerzzz, 19.08.2015 в 14:49.
|
|
19.08.2015, 14:59
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,080
|
|
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)
};
|
|
19.08.2015, 15:33
|
|
Интересующийся
|
|
Регистрация: 02.05.2015
Сообщений: 10
|
|
Спасибо, подскажите пожалуйста если я задаю свойство 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:50
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,664
|
|
tracerzzz,
Сообщение от tracerzzz
|
|
Создать объект image, у которого будет метод конструктор, который создаёт объект связанный с HTML элементом element.
|
Объект, метод, конструктор, элемент - еще что? 
|
|
19.08.2015, 15:58
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,080
|
|
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)
};
|
|
|
|
