[英]How to change css for each additional innerHTML element in a javascript for loop
<div id="test"></div>
<script type="text/javascript">
window.names=["heihachi", "forest law"];
window.values=[22, 31];
len=names.length
for (var i = 0; i < len; i++)
{
document.getElementById('test').innerHTML+= names[i];
//names[i].css=margin-left: values[i]px;//
}
</script>
This is what I would like to do. 这就是我想做的。 The for loop works exactly as intended except for that 10th line.
for循环除第10行外完全按预期工作。 I want each element added to that innerHTML to be moved over a different amount.
我希望添加到该innerHTML中的每个元素的移动量都不同。 So heihachi is moved over 22 px, forest law is moved over 31 px, ect.
因此,heihachi移至22 px以上,森林法移至31 px等。 for all other names and values added.
用于添加的所有其他名称和值。 What I have put there is my attempt (pseudo-code) but it doesn't work.
我输入的内容是我的尝试(伪代码),但是没有用。 How can I do this?
我怎样才能做到这一点?
I'd suggest the following: 我建议以下内容:
// declare variables in the local scope:
var names=["heihachi", "forest law"],
values=[22, 31],
// get a reference to the element outside of the loop (once, versus multiple times):
test = document.getElementById('test'),
// create an element in which to wrap the text:
span = document.createElement('span'),
// declare a variable which will become a reference to the node on which we're working:
_tmp;
// to move the element/words around we need to have 'position: relative':
span.style.position = 'relative';
// iterate over the names array:
for (var i = 0, len = names.length; i < len; i++)
{
// working on a clone of the 'span':
_tmp = span.cloneNode();
// appending a child textNode to that node:
_tmp.appendChild(document.createTextNode(names[i]));
// setting the left property of the Node's style object:
_tmp.style.left = values[i] + 'px';
// appending the node to the 'test' node:
test.appendChild(_tmp);
}
I would, however, prefer to have an explicit correlation between the two arrays, in this case converting the arrays into an array of objects (each object having a name
and value
property): 但是,我希望在两个数组之间具有显式关联,在这种情况下,将数组转换为对象数组(每个对象都具有
name
和value
属性):
var namesAndPositions = [{
'name' : 'heihachi',
'value' : 22
},{
'name' : 'forest law',
'value' : 31
}],
test = document.getElementById('test'),
span = document.createElement('span'),
_tmp;
span.style.position = 'relative';
for (var i = 0, len = namesAndPositions.length; i < len; i++)
{
_tmp = span.cloneNode();
_tmp.appendChild(document.createTextNode(namesAndPositions[i].name));
_tmp.style.left = namesAndPositions[i].value + 'px';
test.appendChild(_tmp);
}
If the goal is to have that measurement ( 22px
and 31px
to the left of each element), then you could instead use display: inline-block
and set the marginLeft
property of the HTMLElement-node: 如果目标是进行该测量(每个元素的左侧分别为
22px
和31px
),则可以改用display: inline-block
并设置HTMLElement-node的marginLeft
属性:
// everything above this point in the code remains the same
span.style.display = 'inline-block';
for (var i = 0, len = namesAndPositions.length; i < len; i++)
{
_tmp = span.cloneNode();
_tmp.appendChild(document.createTextNode(namesAndPositions[i].name));
_tmp.style.marginLeft = namesAndPositions[i].value + 'px';
test.appendChild(_tmp);
}
References: 参考文献:
and here's a more simpler example: 这是一个更简单的示例:
window.names=["heihachi", "forest law"];
window.values=[22, 31];
var len=names.length;
var test = document.getElementById('test');
for (var i = 0; i < len; i++)
{
var elm = document.createElement("span")
elm.innerHTML = names[i];
elm.style.marginLeft = values[i] + 'px';
test.appendChild(elm);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.