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

javascript没有移动元素

2 个答案: