tabIndex как свойство css? - PullRequest
Новая
       37

tabIndex как свойство css?

0 голосов
/ 25 августа 2018

Я пытаюсь выяснить, как использовать свойство HTML tabindex через css.

Я специально хочу добавить tabIndex=0 ко всем элементам div, которые содержат className='my-checkbox'.

Вот что у меня есть: 

<div tabIndex="0" className="my-checkbox">
...
<div>

Поскольку мой <div className="my-checkbox"> повторяется в моем приложении несколько раз, я не хочу явно определять свойство tabIndex каждый раз; поэтому я ищу способ избежать дублирования кода.

Как добавить свойство tabIndex=0 ко всем элементам div, которые содержат className="my-checkbox"?

Я пытался добавить следующее правило CSS, но это не сработало: 

div .my-checkbox-img {
   tab-index: '0'
}

Это добавляет стиль tab-index, который кажется не функциональным; Отладчик Google Chrome показывает его как unknown property.

enter image description here

Я пытался nav-index , но это также кажется устаревшим.

Подведите мой вопрос в три раза:

  1. В чем разница между стилями и свойствами? Я искал что-то более подробное, чем этот SO-ответ .
  2. Как свойства html связаны с атрибутами css (такими как tabIndex до tab-index и т. Д.)?
  3. Как добавить свойство tabIndex=0 ко всем элементам div, которые содержат className="my-checkbox"?

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

я думаю, что это невозможно ? потому что я много искал и ничего не нашел

0 голосов
/ 26 августа 2018
  1. В чем разница между стилями и свойствами?

Вообще говоря, это два отдельных способа управления поведением элемента.Существует некоторое частичное совпадение между некоторыми определенными атрибутами и свойствами CSS (и, конечно, свойства CSS могут быть установлены через атрибут style), но в остальном они в основном независимы.Для получения дополнительной информации посмотрите Ссылка на атрибут HTML и Ссылка на CSS .

Это потому, что сначала появился HTML с атрибутами (около 1993 г.), а затем был изобретен CSSпозже (около 1996 года, с длительным периодом усыновления).Атрибуты HTML обычно определяют «базовые» или «присущие» свойства элемента, например src элемента изображения или скрипта.Классическая таблица также может иметь большую часть своего стиля, контролируемого отдельными атрибутами, потому что это было необходимо до того, как CSS стал популярным.

Так что да, с годами это стало немного беспорядком.

Как свойства html связаны с атрибутами css

Как указано выше, они, как правило, не связаны, за исключением особых случаев, таких как <img width>, с которыми вы связались.

Как добавить свойство tabIndex=0 ко всем элементам div, которые содержат className="my-checkbox"?

В этом конкретном случае вы не можете использовать CSS.Вам просто нужно добавить его в разметку, динамически генерируя атрибут на стороне сервера, если это возможно, или (IMO это худшее решение) с использованием JavaScript после загрузки страницы.

...