Есть ли способ изменить положение элементов DOM, используя JavaScript? - PullRequest
Новая
       0

Есть ли способ изменить положение элементов DOM, используя JavaScript?

0 голосов
/ 19 марта 2020 
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="boxes">
        <div class="red" style="width: 300px; height: 300px; color: red"></div>
        <div class="blue" style="width: 300px; height: 300px; color: blue"></div>
    </div>

</body>
</html>
<style>
 .boxes{display:flex; flex-direction:row;}
</style>

есть ли способ с помощью CSS или javascript поставить div.blue в положение div.red или div.red в положение div.blue

Ответы [ 5 ]

4 голосов
/ 19 марта 2020

Нет js, необходимый для сортировки элементов.

Посмотрите, ищите ли вы это 

.boxes {
  display: flex;
}

.blue {
  order: 1;
}

.red {
  order: 2;
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="boxes">
        <div class="red" style="width: 300px; height: 300px; background: red"></div>
        <div class="blue" style="width: 300px; height: 300px; background: blue"></div>
    </div>

</body>
</html>
1 голос
/ 19 марта 2020

Вы можете сделать это с помощью свойства CSS flex. Просто установите flex-direction элемента boxes на row-reverse. 

.boxes {
  display: flex;
  flex-direction: row-reverse;
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="boxes">
        <div class="red" style="width: 300px; height: 300px; background: red"></div>
        <div class="blue" style="width: 300px; height: 300px; background: blue"></div>
    </div>

</body>
</html>

Примечание

Если вы хотите отобразить два поля по вертикали, используйте flex-direction: column-reverse; вместо row-reverse.

0 голосов
/ 19 марта 2020

Маленький некрасивый код. 

    var redtag = document.getElementsByClassName("boxes")[0].getElementsByClassName("red")[0];
    redtag.remove();
    var bluetag = document.getElementsByClassName("boxes")[0].getElementsByClassName("blue")[0];
    bluetag.remove();
    document.getElementsByClassName("boxes")[0].appendChild(bluetag);
    document.getElementsByClassName("boxes")[0].appendChild(redtag);
0 голосов
/ 19 марта 2020

Попробуйте изменить это так, как вы хотите. 

document.querySelector(".red").addEventListener("mouseover",()=>{
document.querySelector(".red").style.background="blue"
document.querySelector(".blue").style.background="red"

})
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="boxes">
        <div class="red" style="width: 300px; height: 300px; background: red"></div>
        <div class="blue" style="width: 300px; height: 300px; background: blue"></div>
    </div>

</body>
</html>
<style>
 .boxes{display:flex; flex-direction:row;}
</style>
0 голосов
/ 19 марта 2020

Получите родительский узел ('.boxes'), затем получите дочерние индексы и поменяйте местами: 

childNode[1].parentNode.insertBefore(childNode[1], childNode[0]);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...