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