Javascript - изменить стиль верхнего уровня из «ul» как дочерний элемент из родителя div

Question

Я хочу изменить верхнее значение css с помощью javascript, но это не сработает.

У меня есть следующий код:

HTML:

<button onclick="Down()">Move Down</button> 
<div class="test"> 
    <ul> 
     <li>Line one</li> 
     <li>Line two</li> 
     <li>Line three</li> 
    </ul> 
</div> 

CSS:

.test { 
    color:red; 
    height: 200px; 
    width: 200px; 
} 
.test ul{ 
    position: relative; 
    top:50px; 
} 

Javascript:

function Down() { 
    var class_obj = document.getElementsByClassName("test"); 
    var ul_obj = class_obj.getElementsByTagName("ul"); 
    ul_obj.style.top = parseInt(ul_obj.style.top, 10) + 10 + "px"; 
} 

http://jsfiddle.net/fUmJR/

Что мне не хватает?

Answer 1

Похоже, вам нужно немного поменять загрузку JS на jsFiddle. Взгляните на мой образ, чтобы узнать, как действовать дальше. в отладке js, alert - ваш лучший друг!

Answer 2

window.Down = (function() { 
    var ul_obj = document.querySelectorAll('.test ul'); 
    Array.prototype.slice.call(ul_obj).forEach(function(element){ 
     element.style.top = parseInt(element.style.top||50) + 10 + 'px'; 
    }) 
}); 

Функция вниз() в window.onload является локальной переменной с jsfiddle.

Answer 3

Прежде всего getElementsByClassName и getElementsByTagName Листы возврата не являются элементами. И, во-вторых, проверьте, что то, что parseInt возвращает, - это число перед применением стиля.

Все это можно найти путем отладки кода.

Answer 4

Это должно быть код, чтобы сделать это так, как вы себе представить:

this.Down = function Down() { 
    var ul_obj = document.getElementsByTagName("ul"); 
    if(!ul_obj[0].style.top) ul_obj[0].style.top = '50px'; 
    ul_obj[0].style.top = parseInt(ul_obj[0].style.top, 10) + 10 + "px"; 
} 

и вызвать функцию через

<button onclick="javascript:window.Down()">Move Down</button> 

код не работает, потому что ваша функция была в window.onload, поэтому Down() даже не было видно

Вот ваше решение: jsFiddle

Чтобы сделать его более простым, если вы хотите избежать, если блок (который используется, поскольку Javascript может получить style.top только встроенный CSS форматирование), вы могли бы рассмотреть вопрос об использовании этого кода, который включает в себя offestTop:

this.Down = function Down() { 
    var ul_obj = document.getElementsByTagName("ul"); 
    ul_obj[0].style.top = parseInt(ul_obj[0].offsetTop, 10) + 10 + "px"; 
} 

, но вам нужно установить позицию: относительно вашего класса .test!

Answer 5

• JsFiddle не работает так, как нужно изменить параметр из «OnLoad» на «Нет обруча - в»

• При использовании таких методов, как «getElementsByClassName» или «getElementsByTagName» Вы получаете массив элементов. Поэтому вам необходимо ссылаться на первый элемент массива.

Обратите внимание, что я добавил ссылку на товар.

function Down() { 
    var oTest = document.getElementsByClassName("test")[0]; 
    var oUl = document.getElementsByTagName("ul")[0]; 
    oUl.style.top = parseInt(oUl.style.top, 10) + 10 + "px"; 
} 

• Кроме того, я заметил, что у вас неправильный метод для элемента. Он должен быть «", а не «getElementsByClassName».