Question

我试图通过500px使框在X轴上平移，然后返回到其原始状态，为什么相同的逻辑在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>

Answer 1

您的代码中有2个问题。

在方框中选中boxElement.style.color != 'red'，但需要选中background而不是color
要将其返回到初始位置，请使用transform:translateX(0)，因为这是该框在x轴上平移500px之前的初始位置。

您应该对文本执行相同的操作。 rotateZ(0deg)

在元素上使用transform时。您无需更改其初始/默认位置，而只需“编辑/操作”它在屏幕上的位置。默认情况下，其初始位置仍为0。这就是为什么如果您将框翻译为500像素，则无需使用-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>

Answer 2

因为您的if语句取决于style.color，但是您设置了style.background。您需要将if语句更改为：

if (boxElement.style.background != 'red') {

Answer 3

它适用于您的文本，因为您正在检查.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无法使元素返回其原始状态

3 个答案: