Не удается изменить цвет текста с помощью CSS в таблице

ProgramBox

Не удается изменить цвет текста с помощью CSS в таблице

Post author:admin
Запись опубликована:15 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я хочу добавить цветовой стиль в <div> теги.

Это работает только при использовании свойства:

 `background-color`: orange;

Но я хочу, чтобы был изменен только текст, а не фон.

Вот так:

 `color`: orange;

В этой демонстрации не нужно, чтобы Javascript все еще работал.

Моя демонстрация здесь:

 function firefoxFix() {
  
    if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {
        
        var tds = document.getElementsByTagName( 'td' );
        
        for( var index = 0; index < tds.length; index   ) {
            tds[index].innerHTML = '<div class="ff-fix">'   tds[index].innerHTML   '</div>';                     
        };
        
        var style = '<style>'
              'td { padding: 0 !important; }' 
              'td:hover::before, td:hover::after { background-color: transparent !important; }'
              '</style>';
        document.head.insertAdjacentHTML( 'beforeEnd', style );
        
    };
    
};

firefoxFix();

 table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

td, th, .ff-fix {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::after,
.ff-fix:hover::after { 
    background-color: orange;
    content: '0a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

 <table>
<tbody>

    <tr>
        <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
    </tr>

    <tr>
        <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
    </tr>

    <tr>
        <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
    </tr>

    <tr>
        <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
    </tr>
  </tbody>
</table>

Спасибо.

1. CSS был разработан американцами, которые не знают, как пишется «color», поэтому имя свойства — color .

2. Вы хотите установить color вместо background ?

3. Да, я хочу установить color текста вместо background-color ячеек.

4. Вы хотите менять цвет только при наведении курсора мыши на определенный столбец? верно?

5. @w3debugger . Правильно. Вы можете видеть в моем демонстрационном коде. Измените цвет текста в ячейке (часть определенного столбца) вместо изменения цвета фона в ячейке (часть определенного столбца).

Ответ №1:

Я думаю, лучший подход — добавить класс к элементу html, когда пользователь использует firefox. Для этого вы можете использовать анонимную функцию, например:

(function(html) { if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) { html.classList.add('is-firefox'); } })(document.documentElement);

Затем вы можете добавить css для этого класса:

.is-firefox td { color: orange; }

Работает jsFiddle. Протестировано в Chrome 54 и Firefox 45.

Вы также можете попробовать это исправление css без какого-либо javascript, например:

@-moz-document url-prefix() { td { color: orange; } }

Здесь у вас есть еще немного информации о взломах CSS:https://www.wired.com/2010/02/browser-specific_css_hacks /

1. Я пишу это, работая во всех браузерах, кроме IE 9-. И я попробовал ваш код, но он не работает.

2. кажется, не работает. Я попробовал вашу скрипку. Он отображает только текст: Test . Я не думаю, что это означает?

3. ДА. ‘Test’ черный в Chrome и оранжевый в Firefox. Изменение цвета в firefox было вашей проблемой?

4. Я понимаю. Вы, кажется, ошибаетесь; я не различаю Chrome или Firefox. Я только хочу: когда пользователь наводит курсор на определенные столбцы, он автоматически выделяет текст этого столбца оранжевым. В настоящее время я меняю только цвет фона успеха. Вы понимаете мои проблемы? Спасибо.

Ответ №2:

Вы можете добавить a className ко всем td элементам при event.target .cellIndex событии mouseover at className , удалить td из всех mouseleave элементов при, событие

 var elems = document.querySelectorAll("td");

var elemParents = document.querySelectorAll("tr")

for (var td of elems) {
  td.addEventListener("mouseover", function(e) {
    var index = e.target.cellIndex;
    for (let tr of elemParents) {
      tr.querySelectorAll("td")[index]
      .className = "color";
    }
  });
  td.addEventListener("mouseleave", function(e) {
    for (let tr of elemParents) {
      for (var cell of tr.querySelectorAll("td")) {
        cell.className = "";
      }
    }
  })
}

function firefoxFix() {

  if (/firefox/.test(window.navigator.userAgent.toLowerCase())) {

    var tds = document.getElementsByTagName('td');

    for (var index = 0; index < tds.length; index  ) {
      tds[index].innerHTML = '<div class="ff-fix">'   tds[index].innerHTML   '</div>';
    };

    var style = '<style>'   'td { padding: 0 !important; }'   'td:hover::before, td:hover::after { background-color: transparent !important; }'   '</style>';
    document.head.insertAdjacentHTML('beforeEnd', style);

  };

};

firefoxFix();

 .color {
  color: orange;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  overflow: hidden;
  z-index: 1;
}
td,
th,
.ff-fix {
  cursor: pointer;
  padding: 10px;
  position: relative;
}
td:hover::after,
.ff-fix:hover::after {
  background-color: blue;
  content: '0a0';
  height: 10000px;
  left: 0;
  position: absolute;
  top: -5000px;
  width: 100%;
  z-index: -1;
}

 <table>
  <tbody>

    <tr>
      <td>20</td>
      <td>21</td>
      <td>23</td>
      <td>25</td>
      <td>27</td>
    </tr>

    <tr>
      <td>18</td>
      <td>20</td>
      <td>22</td>
      <td>24</td>
      <td>26</td>
    </tr>

    <tr>
      <td>17</td>
      <td>19</td>
      <td>21</td>
      <td>23</td>
      <td>25</td>
    </tr>

    <tr>
      <td>16</td>
      <td>18</td>
      <td>20</td>
      <td>22</td>
      <td>24</td>
    </tr>
  </tbody>
</table>

Ответ №3:

Привет, попробуйте это ниже

 $('td').hover(function() {
    var t = parseInt($(this).index())   1;
    $('td:nth-child('   t   ')').addClass('highlighted');
},
function() {
    var t = parseInt($(this).index())   1;
    $('td:nth-child('   t   ')').removeClass('highlighted');
});

 table, td {
    border: 1px solid black;
}

td {
    width: 40px;  
    height: 40px;
}

.highlighted {
    color:orange;
    background-color:black;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>aa</td>
        <td>aa</td>
         <td>aa</td>
        <td>aa</td>
       
  </tr>
    <tr>
        <td>aa</td>
        <td>aa</td>
         <td>aa</td>
        <td>aa</td>
  </tr>
    <tr>
        <td>aa</td>
        <td>aa</td>
         <td>aa</td>
        <td>aa</td>
  </tr>
    <tr>
        <td>aa</td>
        <td>aa</td>
         <td>aa</td>
        <td>aa</td>
  </tr>
</table>

Ответ №4:

Вы можете вызывать функцию при наведении курсора мыши на каждую ячейку следующим образом :

 function a(ele){              //On mouse over
ele.style.color = 'orange'; 
}

function b(ele){             // On mouse out
ele.style.color = 'grey';
}