Форум

systemiv · #1 (**permalink**) 10.11.2011, 23:17

Например есть куча товаров с картинками, мне нужно обернуть эту картинку в блок. Как лучше сделать?

рони · #2 (**permalink**) 11.11.2011, 00:13

systemiv,
http://api.jquery.com/wrap/

GuardCat · #3 (**permalink**) 11.11.2011, 11:23

Вот пример. Если надо обернуть все теги img, достаточно написать цикл.

<html>
<head>
<script language="javascript">
function imgToDiv() {
	var div = document.createElement("div"), img = new Image, oldImg =  document.getElementsByTagName("img")[0];;
	img.src =  oldImg.src;
	div.style.border = "2px solid black";
	div.appendChild(img);
	document.body.replaceChild(div, oldImg);
}
</script>
</head>
<body>
	<img src="http://file.mobilmusic.ru/05/89/d1/672665.jpg">
	<button onclick = "imgToDiv()">Картинку в блок</button>
</body>
</html>

Aetae · #4 (**permalink**) 11.11.2011, 13:33

Это делается в одну строку))

<!DOCTYPE HTML>
<html>
<body>
<style>
div{float:left;border:5px solid black;}
img{vertical-align:top;cursor:pointer}
</style>  

<script>
function imgToDiv(img) {
return img.parentNode.insertBefore(document.createElement('div'), img).appendChild(img);
}
</script>
<img onclick="imgToDiv(this)" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
</body>
</html>

GuardCat · #5 (**permalink**) 11.11.2011, 13:51

Aetae, а это кроссбраузерно? IE не поперхнётся?

Aetae · #6 (**permalink**) 11.11.2011, 14:42

Не должен.
Проверь сам.

Форум

Справочник

Discord чат

Курсы javascript