无法更新返回的element.style.left，为什么？

Question

我返回一个元素的左边位置，并希望稍后在循环中更改它，但它不起作用。在赋值错误中，我得到了一个无效的左手边。

老实说，我不明白。它只是不能更新px，如果我通过函数返回样式，为什么会出现这种情况？我想不出任何理由，因为对我来说这是非常有意义的。

function pos(index) { 
    return wrapper.children[index].style.left; 
} 

for (var i = 0; i < 10; i++) { 
    wrapper.appendChild(document.createElement('div')); 
    pos(i) = Math.random() * w + 'px';; 
} 

Answer 1

你没有返回一个指向左边的指针，你正在返回值。

您可能需要将值发送到pos或返回样式。

function pos(index, px) { 
    wrapper.children[index].style.left = px; 
} 

for (var i = 0; i < 10; i++) { 
    wrapper.appendChild(document.createElement('div')); 
    pos(i, Math.random() * w + 'px'); 
} 

或

function pos(index) { 
    wrapper.children[index].style; 
} 

for (var i = 0; i < 10; i++) { 
    wrapper.appendChild(document.createElement('div')); 
    pos(i).left = Math.random() * w + 'px'; 
} 

Answer 2

尝试是这样的：

function pos(index) { 
    return wrapper.children[index].style; 
} 

for (var i = 0; i < 10; i++) { 
    wrapper.appendChild(document.createElement('div')); 
    var style = pos(i); 
    style.left = Math.random() * w + 'px'; 
} 

你的函数返回你想要的对象，但你不能修改它（它是没有L值）。你必须首先将它存储在一个变量中（这是一个l值）。

Answer 3

也许这就是你需要：

var newElement, 
 
    i, 
 
    wrapper = document.getElementById('wrapper'); 
 

 
for (i = 0; i < 10; i++) { 
 
    //add the element to the wrapper 
 
    wrapper.appendChild(getPositionedElement()); 
 

 
} 
 

 
function getPositionedElement(){ 
 
    //Width, I don't know where you want to get this from 
 
    var w = 1000, 
 
     //create a new element 
 
     el = document.createElement('div'); 
 
    //set the left position property 
 
    el.style.left = Math.random() * w + 'px'; 
 
    return el; 
 
}

#wrapper { 
 
    position: relative; 
 
    height: 300px; 
 
    
 
} 
 

 
#wrapper div { 
 
    height: 50px; 
 
    width: 50px; 
 
    border: 2px solid black; 
 
    position: absolute; 
 
}

<div id="wrapper"></div>