使用JavaScript无法使元素返回其原始状态
[英]can't make element return to it's original state using JavaScript
问题描述
我试图使框在X轴上平移500px然后返回到其原始状态，为什么相同的逻辑在title元素上起作用但在框上不起作用。
（注意：我是使用JavaScript新手）
function colorChange() { let title = document.getElementById('title'); if (title.style.color != 'red') { title.innerText = 'I\\'m Red'; title.style.color = 'red'; title.style.transition = '2s'; title.style.animationDelay = '3s'; title.style.transform = 'rotateZ(360deg)'; } else { title.innerText = 'I\\'m Black'; title.style.color = 'black'; title.style.transition = '2s'; title.style.animationDelay = '3s'; title.style.transform = 'rotateZ(-360deg)'; } } function boxTranslate() { let boxElement = document.getElementsByClassName('box')[0]; if (boxElement.style.color != 'red') { boxElement.style.background = 'red'; boxElement.style.transform = 'translateX(500px)'; boxElement.style.transition = '1s'; } else { boxElement.style.background = 'royalblue'; boxElement.style.transform = 'translateX(-500px)'; boxElement.style.transition = '1s'; } }
.wrapper { display: flex; justify-content: center; align-items: center; height: 300px; } .box { height: 100px; width: 100px; background: royalblue; }
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="./style.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="wrapper"> <h1 id="title" onclick="colorChange()">I'm Black</h1> </div> <div class="big-box"> <div onclick="boxTranslate()" class="box"></div> </div> <script src="script.js"></script> </body> </html>
3 个解决方案
解决方案1
2 已采纳 2018-11-20 12:41:55
您的代码中有2个问题。
在此框上，检查
boxElement.style.color != 'red'但您需要检查background而不是color要将其返回到初始位置，请使用
transform:translateX(0)因为这是该框在x轴上平移500px之前的初始位置。
您应该对文本执行相同的操作。 rotateZ(0deg)
在元素上使用transform时。 您无需更改其初始/默认位置，而只需“编辑/操作”它在屏幕上的位置。 默认情况下，它的初始位置仍为0 。 这就是为什么如果翻译框500px不需要使用-500px而是使用0原因，因为transform:translate(-500px)会将框从当前位置移动到默认/初始位置的左侧500px。
function colorChange() { let title = document.getElementById('title'); if (title.style.color != 'red') { title.innerText = 'I\\'m Red'; title.style.color = 'red'; title.style.transition = '2s'; title.style.animationDelay = '3s'; title.style.transform = 'rotateZ(360deg)'; } else { title.innerText = 'I\\'m Black'; title.style.color = 'black'; title.style.transition = '2s'; title.style.animationDelay = '3s'; title.style.transform = 'rotateZ(0deg)'; } } function boxTranslate() { let boxElement = document.getElementsByClassName('box')[0]; if (boxElement.style.background != 'red') { boxElement.style.background = 'red'; boxElement.style.transform = 'translateX(500px)'; boxElement.style.transition = '1s'; } else { boxElement.style.background = 'royalblue'; boxElement.style.transform = 'translateX(0px)'; boxElement.style.transition = '1s'; } }
.wrapper { display: flex; justify-content: center; align-items: center; height: 300px; } .box { height: 100px; width: 100px; background: royalblue; }
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="./style.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="wrapper"> <h1 id="title" onclick="colorChange()">I'm Black</h1> </div> <div class="big-box"> <div onclick="boxTranslate()" class="box"></div> </div> <script src="script.js"></script> </body> </html>
解决方案2
1 2018-11-20 12:40:52
因为您的if语句取决于style.color ，但是您设置了style.background 。 您需要将if语句更改为：
if (boxElement.style.background != 'red') {
解决方案3
1 2018-11-20 12:42:20
它对您的文本有效，因为您正在检查.color样式而不是.background样式。有关固定版本，请参见下面的示例。 除了更改if语句外，您还需要将else transform:translateX选项更新为0
function colorChange() { let title = document.getElementById('title'); if (title.style.color != 'red') { title.innerText = 'I\\'m Red'; title.style.color = 'red'; title.style.transition = '2s'; title.style.animationDelay = '3s'; title.style.transform = 'rotateZ(360deg)'; } else { title.innerText = 'I\\'m Black'; title.style.color = 'black'; title.style.transition = '2s'; title.style.animationDelay = '3s'; title.style.transform = 'rotateZ(-360deg)'; } } function boxTranslate() { let boxElement = document.getElementsByClassName('box')[0]; if (boxElement.style.background != 'red' ) { boxElement.style.background = 'red'; boxElement.style.transform = 'translateX(500px)'; boxElement.style.transition = '1s'; } else { boxElement.style.background = 'royalblue'; boxElement.style.transform = 'translateX(0)'; boxElement.style.transition = '1s'; } }
.wrapper { display: flex; justify-content: center; align-items: center; height: 300px; } .box { height: 100px; width: 100px; background: royalblue; }
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="./style.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="wrapper"> <h1 id="title" onclick="colorChange()">I'm Black</h1> </div> <div class="big-box"> <div onclick="boxTranslate()" class="box"></div> </div> <script src="script.js"></script> </body> </html>
使用JavaScript仍无法获得HTML元素的原始高度
[英]Still can't get the original height of an HTML element using JavaScript
如果再次单击该按钮，如何使动画返回其原始状态？
[英]How to return an animation to it's original state if the button is clicked again?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.