Javascript - 从“ul”作为孩子从div父母更改顶部样式

我想使用javascript更改CSS的顶部值，但它不起作用。Javascript - 从“ul”作为孩子从div父母更改顶部样式

我有以下代码：

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/

我错过了什么？

来源

2013-11-27 AlexPac

如果你检查从该小提琴cosole日志。点击后它会抛出一次异常Uncaught ReferenceError：Down未定义 – Triode

这是2013年。不要使用侵入事件处理程序:) – BenM

https://developer.mozilla.org/en-US/docs/Web/API/EventListener – rafaelcastrocouto

看起来你必须在jsFiddle上稍微改变一下JS加载。看看我的形象，了解如何进行的一些提示。在调试js时，alert是你最好的朋友！

changes I made on jsfiddle to demonstrate how to get started fixing your code

来源

2013-11-27 13:18:42

不知道'alert'是你最好的朋友...控制台可能会嫉妒 –

-1。这并不能解决问题。代码不起作用的原因是'getElementsByClassName（）'只支持'document'。第二次调用失败（请参阅给定示例中的控制台）。 – BenM

BenM，在jsFiddle中看看这个例子的控制台：“Down没有定义”我猜，我们在方法上有点不同。这个人对于js/fiddle来说相当新颖（嘿，我是新来的小提琴）。我认为教鱼而不是提供鱼更好。你的评论也有帮助，但有很多事情要指出，比如“ul”不是类名。 –

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的局部变量。

来源

2013-11-27 13:19:17

首先getElementsByClassName和getElementsByTagName返回列表中没有元素。其次，在应用样式之前检查parseInt返回的是一个数字。

所有这些都可以通过调试代码找到。

来源

2013-11-27 13:25:54 andrei

这应该是你的代码做，在某种程度上你想象：

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只能从内联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类！

来源

2013-11-27 13:34:27

，你需要从“的onload”更改选项的jsfiddle是行不通的 -
当您使用诸如“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”。

来源

2013-11-27 13:48:04 raptor

谢谢大家的回答！有用：） – AlexPac

Javascript - 从“ul”作为孩子从div父母更改顶部样式

回答

相关问题