Как изменить атрибут html элемента через css селектор?

Имеется вот такой код:
<th width="30" title="Status">

Хочу поменять ширину "width" через css селектор.
Делаю так:

Вот так меняется, но в dom html остаётся width="30".
Больше никак не изменить через css?

Дополнительно:

через css изменить значение аттрибута в html невозможно, ты можешь только поверх накинуть стили, которые возможно перекроют ширину

  • Может помочь: width: 20px !important;
    Но я даже на CodePen не могу повторить ваш пример так, чтобы столбец брал ширину из атрибута, так что говорю вслепую.

  • Вот так меняется, но в dom html остаётся width="30".

    Ну дык там так и будет отображаться 30, если в HTML-разметке 30.
    CSS - это язык описания внешнего вида документа, изменять с его помощью ЗНАЧЕНИЯ в HTML вы не сможете.
    Тем более не понятно какую цель вы преследуете? Сделать ширину 20 вместо 30? Ну дык задайте в CSS и все, какая разница что в разметке будет 30, да хоть 1000, если в CSS вы укажите условно 20px !important?

  • Danny Arty,

    Тем более не понятно какую цель вы преследуете?

    В Mikrotik роутере в веб версии есть таблицы, колонки, которые постоянно меняют свои размеры в неудобные для меня, даже после того как я мышкой изменю до нужной ширины.

    В Firefox через расширение Stylus я прописываю свои правила для нужного хоста/url.
    Но после того как я прописал вышенаписанное мной правило, колонка перестала менять ширину мышкой. Она зафиксировалась в неизменяемую ширину.

    Т.е. если вдруг мне всё таки понадобится изменить ширину этой колонки (а это приходится иногда делать), то я не смогу изменить её.

  • Константин, "В Mikrotik роутере в веб версии есть таблицы" - так и напишите им в суппорт, что вас не устраивает
  • Константин, Greasemonkey или иной user js в помощь.
  • Всем спасибо за помощь.

    • HTML аттрибуты нельзя менять через CSS. Только через JS.

    + Заказать

     

    Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

     

      • Как изменить атрибут html элемента через css селектор?Есть ответ
      • 08.04.2024
      Ответить

      Для изменения атрибутов HTML элемента через CSS селектор, вы можете использовать псевдокласс attr(). Этот псевдокласс позволяет вам получить значение атрибута элемента и использовать его в стиле CSS.

      Например, если вы хотите изменить цвет текста элемента при наведении курсора, и использовать значение атрибута href в качестве цвета, вы можете сделать следующее:

      html

      a::after {
      content: attr(href); /* используем значение атрибута href */
      color: attr(href, url); /* устанавливаем цвет текста в зависимости от значения атрибута href */
      }

      Кликни меня

      В этом примере, при наведении курсора на ссылку , цвет текста будет изменяться в зависимости от значения атрибута href. В данном случае, если значение атрибута href равно #ff0000, то текст будет окрашен в красный цвет.

      Таким образом, псевдокласс attr() позволяет динамически изменять стили элементов на основе их атрибутов, что может быть очень удобно при создании интерактивных и адаптивных веб-страниц.

    Оставить комментарий