Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как получить доступ к style объекта через chilNodes? (https://javascript.ru/forum/events/62559-kak-poluchit-dostup-k-style-obekta-cherez-chilnodes.html)

Валес 16.04.2016 15:04

Как получить доступ к style объекта через chilNodes?
 
Здравствуйте. Помогите, пожалуйста, разобраться с тем, что не так в подобной записи доступа к style объекта через childNodes в функции onButt(elem). Читая подобный код других людей, я не вижу в нём различий, но у людей он работает, а у меня нет. Что я пропускаю? Заранее благодарю.

Прошу прощения. Отредактировал. Закинул код целиком.

<html>
	<head>
		<style type="text/css">
			.leftCorn {-webkit-clip-path: polygon(0px 50%, 100% 0px, 100% 100%); width: 50px; height: 50px; background: green; position: absolute; left: 0px; margin: 0px;}
			.rightCorn {-webkit-clip-path: polygon(0px 0px, 100% 50%, 0px 100%); width: 50px; height: 50px; background: green; position: absolute; left: 50px; margin: 0px;}
		</style>
		<script type="text/javascript">
			function onButt(elem) {
				elem.childNodes[0].style.left = -50 + 'px';
				elem.childNodes[1].style.left = 100 + 'px';
				elem.childNodes[2].style.left = 0 + 'px';
				elem.childNodes[2].style.width = 100 + 'px';
		}
		</script>
	</head>
	<body>
		<div id = "btn" onmouseover = "onButt('btn');" style = "width: 100px; height: 50px; padding: 0px; position: fixed; left: 400px;">
			<div id = "c1" class = "leftCorn"></div>
			<div id = "c2" class = "rightCorn"></div>
			<div style = "height: 50px; background: grey; position: absolute; left: 50px;"></div>
		</div>
	</body>
</html>

рони 16.04.2016 15:14

Валес,
у промежутков между тегами (textNode) нет style.
Цитата:

Сообщение от Валес
childNodes

children

Валес 16.04.2016 15:18

Простите меня на данный момент времени затупка в этом плане. Не могли бы вы в примере кода пояснить? Не совсем понимаю о чём идёт речь. Совсем недавно ознакомляюсь с этой темой. Раньше всегда обращался к объектам только через "id". Пока мало что понимаю в дочерней структуре объектов.

рони 16.04.2016 15:25

Валес,
строка 9 обращается к промежутку между строкой 17 и 18, так понятнее?

рони 16.04.2016 15:28

Валес,
elem.childNodes[0] -- перевод строки
elem.childNodes[1] --- <div id = "c1" class = "leftCorn"></div>
elem.childNodes[2] -- перевод строки

Валес 16.04.2016 15:37

Благодарю. В теории мне всё ясно. Но я пытался менять индексы с учётом перевода строки и пробовал использовать children. У меня как было всё статичным, так и осталось, к моему сожалению.

рони 16.04.2016 15:43

Валес,
кавычки уберите из onButt в onmouseover

Валес 16.04.2016 15:48

Вот...дела...как же глупо.) Извиняюсь за свою не- и благодарю за вашу внимательность. С учётом всего остального всё работает. Спасибо.
До этого, когда я пробовал убирать кавычки, ошибка была в индексах, поэтому счёл, что это не играет роли.
Странно, что я это не уяснил на автомате. Потому что другие мои функции работали через передачу id в функцию.


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