我正在学习javascript,到目前为止,我了解很多事情是如何工作的。可悲的是,他们没有解释如何定位元素颜色或如何定位元素/选择器/div。
我正在测试我的知识。我正在尝试通过使用 for 循环为每两个列表项提供红色。
我该怎么做?
var listColor = function(){
var color = style.("red");
var list = getElementsByTagName("li");
for (i = 0; i < list.length; i + 2;) {
list === color
}
];
listColor();
这是我的 http://jsfiddle.net/Lr8nZ/15/
更新了 JSfiddle,但仍然无法正常工作 http://jsfiddle.net/Lr8nZ/23/
所以基本上:
红黑红黑
像这样的事情。
var listColor = function(){
var list = document.getElementsByTagName("li");
for (i = 0; i < list.length; i++) {
if(i%2==0)
list[i].style="color:red";
else
list[i].style="color:blue";
}
}
listColor();
您有一些语法错误,但您可以这样做:
var listColor = function() {
var list = document.getElementsByTagName('li');
for (var i = 0, l = list.length; i < l; i++) {
if (i % 2 === 0) {
list[i].style.color = 'red';
}
}
};
// Or...
var listColor = function() {
var list = document.getElementsByTagName('li');
for (var i = 0, l = list.length; i < l; i += 2) {
list[i + 1].style.color = 'red';
}
};
listColor();
递增时i
请确保使用 i++
或 i += 1
更新其值,否则将创建一个无限循环。
i % 2
使用%
模运算符。这是您从两个数字相除得到的余数。偶数平均除以 2,因此余数将为 0,我们对此进行检查。
您要找的房产叫做style
。它有一个名为 color
的属性,在这种情况下,我们将其设置为字符串'red'
。
试试这个
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
index=1;
$("#temp li").each(function(){
if(index%2==0)
{
$(this).css("color","red")
}
index++;
});
})
</script>
<style>
</style>
</head>
<body>
<ul id='temp'>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</body>
</html>
尝试使用控制台查看代码中的错误。它是任何js程序员都不可或缺的工具。这是更新的小提琴 http://jsfiddle.net/Lr8nZ/24/
您注意到的第一件事是 style.color('red')
.为了使这一行成为有效的js,必须定义一个样式对象。否则它会在window
上搜索它,这总是会导致混乱。
另一件事是注意我们如何实际分配新值来i
for 循环的第三个条件。仅提及i+2
是行不通的,因为i
将保持不变,从而导致无限循环。
再次,启动 Web 控制台。通常,您可以通过右键单击页面>检查 Web 控制台>执行此操作。