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' });