Javascript - 将“ul”中的顶级样式从div父级更改为子级

Question

我想使用javascript从css更改顶部值，但它不起作用。

我有以下代码：

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

看起来你必须在jsFiddle上稍微更改JS加载。看看我的图片，了解如何继续进行的一些提示。在调试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中的函数Down（）是一个带有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

为了使其更简单，如果你想避免if块（因为javascript只能从内联CSS格式获得style.top而使用），你可以考虑使用包含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”更改为“No wrap-in”

• 当您使用诸如“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”。