javascript不移動元素

Question

我正在嘗試使可點擊的框禁用變換CSS。我試圖用JavaScript覆蓋CSS，但它似乎沒有工作。我希望他們在點擊<a>之後簡單地向左和向下移動，如果他們只關注<input>，他們將會是。

.bigbox { 
border: 2px solid black; 
border-radius:  20px; 
background-color: blue; 
color: white; 
padding-left: 15px; 
} 
#closebigbox { 
padding: 10px; 
border: 2px solid black; 
border-radius:  20px; 
background-color: blue; 
color: white; 
font-size: 8px; 
width: 25px; 
text-align: left; 
background-color: silver; 
} 
.bigbox_submit{ 
padding: 3px; 
border: 2px solid black; 
border-radius:  20px; 
background-color: blue; 
color: white; 
font-size: 12px; 
width: 25px; 
text-align: left; 
background-color: silver; 
} 

.bigbox{ 
-moz-transition: all 0.5s ease-in-out; 
} 
.bigbox:focus { 
background-color: #fc3; 
-moz-transform: translate(125px,25px) scale(2); 
} 

---

<a href="javascript: document.getElementsByClassName('bigbox').style.position = 'relative'; document.getElementsByClassName('bigbox').style.left = '125px'; document.getElementsByClassName('bigbox').style.top = '25px';" id="closebigbox" >Clear</a> 

<form> 
<input type="text" class="bigbox" /><br/> 
<input type="text" class="bigbox" /><br/> 
<input type="text" class="bigbox" /><br/> 
<a href="javascript:" class="bigbox_submit" >Submit</a> 
</form>` 

Answer 1

getElementsByClassName返回一個數組，所以你通過所有的元素都需要循環，然後應用樣式：

var _elements = document.getElementsByClassName('bigbox'); 
for(var i = 0; i < _elements.length; i ++){ 
    _elements[i].style.position = 'relative' 
    _elements[i].style.left= '125px' 
    _elements[i].style.top= '25px' 
} 

Answer 2

嘗試做這樣的事情

$('Foo').animate({right:2000px}).delay(3000).animate({left: '0px' });