Переключение между стилем двух элементов с использованием его идентификаторов - PullRequest
Новая
       0

Переключение между стилем двух элементов с использованием его идентификаторов

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

Я использую нативный jS без библиотек. Не могли бы вы помочь мне найти ошибку, JSFiddle Над HTML и js кодом 

<script> function chBackcolor(){
  var h = document.getElementById('h');
  var v = document.getElementById('v');
  var bgcH = getComputedStyle(h).style.backgroundColor;
  var bgcV = getComputedStyle(v).style.backgroundColor;
   h.style.backgroundColor = bgcV;
   v.style.backgroundColor = bgcH;
  //document.getElementById('h').style.backgroundColor=white;
} </script>

    <table style='border: 1px solid black'>

        <tr id='h' style='background-color:red' >
            <td>FN</td>
            <td>LN</td>
            <td>Age</td>
        </tr>
        <tr id='v' style='background-color:blue' >
            <td>Hamdi</td>
            <td>TRIMECH</td>
            <td>23</td>
        </tr>
    </table>
    <button type="button" onclick="chBackcolor();">Swap color</button>

Ответы [ 2 ]

1 голос
/ 04 марта 2020

Вам не нужно использовать «getComputedStyle» (вот почему ваш код не работает). Используйте var bgcH = h.style.backgroundColor; Если вы хотите использовать getComputedStyle(), вам нужно будет использовать getPropertyValue("background-color") вместо .style.backgroundColor (есть пример в последнем блоке кода).

Примечание , если вы используете только bgcH и bgcV для изменения цвета (вы не хотите сохранять его для дальнейшего использования), вам нужен только 1 из них. Вы можете сделать что-то вроде: 

var tempColor = h.style.backgroundColor; 
h.style.backgroundColor = v.style.backgroundColor;
v.style.backgroundColor = tempColor;

Если в вашей таблице будет более 2 строк, вам следует рассмотреть возможность использования css nth-child (odd) / nth-child (even) и используя javascript, чтобы перевернуть эти цвета. 

    <style>
        tr:nth-child(odd) {
            background: red;
        }
        tr:nth-child(even) {
            background: blue;
        }
    </style>

<table style='border: 1px solid black'>

    <tr id='h' >
        <td>FN</td>
        <td>LN</td>
        <td>Age</td>
    </tr>
    <tr id='v' >
        <td>Hamdi</td>
        <td>TRIMECH</td>
        <td>23</td>
    </tr>
</table>
<button type="button" onclick="chBackcolor();">Swap color</button>

<script> function chBackcolor(){
    var odd = document.querySelector("tr:nth-child(odd)");
    var even = document.querySelector("tr:nth-child(even)");
    var colorTemp = window.getComputedStyle(odd).getPropertyValue('background-color');
    odd.style.background = window.getComputedStyle(even).getPropertyValue('background-color');;
    even.style.background = colorTemp;
} </script>
0 голосов
/ 03 марта 2020

Ваш код был исправлен

Пожалуйста, проверьте: - Фактический код: - 

<!DOCTYPE HTML>
<html>
<head>

</head>
<body>

    <table >

        <tr id='h' style='background-color:red' >
            <td>FN</td>
            <td>LN</td>
            <td>Age</td>
        </tr>
        <tr id='v' style='background-color:blue' >
            <td>Hamdi</td>
            <td>TRIMECH</td>
            <td>23</td>
        </tr>
    </table>
    <button type="button" onclick="chBackcolor();">Swap color</button>
</body>
<script>
function chBackcolor(){
  var h = document.getElementById('h');
  var v = document.getElementById('v');
  var bgcH = h.style.backgroundColor;
  var bgcV = v.style.backgroundColor;
   h.style.backgroundColor = bgcV;
   v.style.backgroundColor = bgcH;
  //document.getElementById('h').style.backgroundColor=white;
}
</script>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...