Javascript-форум - Проблема с onLoad и onResize в CMS Joomla

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Проблема с onLoad и onResize в CMS Joomla (https://javascript.ru/forum/events/17262-problema-s-onload-i-onresize-v-cms-joomla.html)

Проблема с onLoad и onResize в CMS Joomla

Написал маленький скриптик:
function ChHgh() {
if (document.body.clientWidth < 1250) {
var div = document.getElementsByTagName('div');
for (var i = 0; i < div.length; i++){
if (div[i].className == 'column1'){
div[i].style.width = '100%';
}}
}
}
И прикрепил его в head обычной html-страницы, обработчики событий в body прописал:
<body onload="ChHgh();" onresize="ChHgh();">
Ура, всё работает!

После этого эксперимента прикрепил этот же скиптик в шаблон Joomla (и обработчики, в body шаблона прописал)
Ошибок консоль Firebug не выдаёт, а скиптик не работает!

Если кто знает (или сталкивался), объясните, пожалуйста, что я не учел?

Чуть-чуть разобрался, в чем причина ошибки. Но исправить всё таки не смог.

В эксперементальной html-странице у меня нет вложеных элементов, а в Joomla - есть. Мой скрипт не работает именно из-за этого. Вот, как я его слегка изменил:

function ChHgh() {
if (document.body.clientWidth < 1250) {
var div = document.getElementById('content').getElementsByTa gName('div');
for (var i = 0; i < div.length; i++){
if (div[i].className == 'blog-post'){
div[i].style.width = '100%';
}}
}
}

Но таким образом я добрался только до первого вложеного слоя (div.blog-post), а у меня внутри него ещё один есть, внутри которого находится ещё один, нужный мне для изменения скриптом слой.

Подскажите, пожалуйста, как до него добраться? (Мучаюсь уже второй день)
Вот, DOM-дерево (сокращённое, конечно) из joomla-сгенерированной страницы:

<div id="content">
<div class="blog-post">
<div class="article_row-post">
<div class="article_column column1 cols2">

(Это слой, к которому я никак не могу подобраться)

</div>
</div>
</div>
</div>

Почти исправил

Вот таким образом я добрался до второго потомка:
function ChHgh() {
if (document.body.clientWidth < 900) {
var one = document.getElementById('content');
for (var i = 0; i < one.childNodes.length; i++){
two = one.childNodes[i];
for (var i = 0; i < two.childNodes.length; i++){
three = two.childNodes[i];
for (var i = 0; i < three.childNodes.length; i++){
if (three.className == 'article_row-post'){
three.style.color = 'red';
}}
}
}
}
}
До этого уровня всё работает прекрасно.

Остался третий потомок. Но когда я добавляю цикл для его поиска:
four = three.childNodes[i];
for (var i = 0; i < four.childNodes.length; i++){
if (four.className == 'article_column'){
four.style.color = 'red';
}}
}
}
}
}
}

браузер почему-то виснет...

Осталась какая-то мелкая ошибка, не могу её найти.

<div id="content">
<div class="blog-post">
<div class="article_row-post">

(Это слой, к которому я уже подобрался)

<div class="article_column column1 cols2">

(Это слой, к которому я никак не могу подобраться)

</div>
</div>
</div>
</div>

Всё, разобрался (ещё вчера вечером), вот финальный вариант скрипта:
function ChHgh() {
if (document.body.clientWidth < 1250) {
var one = document.getElementById('content');
for (var i = 0; i < one.childNodes.length; i++){
two = one.childNodes[i];
for (var i = 0; i < two.childNodes.length; i++){
three = two.childNodes[i];
for (var i = 0; i < three.childNodes.length; i++){
if (three.childNodes[i].className == 'article_column column1 cols2'){
three.childNodes[i].style.width = '100%';
}}
}
}
}
}

А браузер зависал, из-за того, что я по ошибке на один цикл больше, написал, в прошлый раз...
Если кому-нибудь пригодится, буду рад.

P.S. Всем спасибо (за внимание)...