Можем ли мы указывать значения атрибутов пользовательских данных в CSS?

Question

На элементах я могу указать атрибуты данных как, например.

<div data-widget-type="MyWidgetType1" data-property1="20" data-property2="test"> 
... 
</div> 

Я хочу захватить их в классе, например.

.MyClass1 { 
data-widget-type:"MyWidgetType1"; 
data-property1:"20"; 
data-property2:"test"; 
} 

<div class="MyClass1"> 
... 
</div> 

Есть ли способ указать значения атрибутов данных в CSS?

Answer 1

Нет, такой функции не существует даже для атрибутов по умолчанию (например, вы не можете установить атрибут имени через CSS). Но вы можете выбрать эти пользовательские атрибуты:

.MyClass1[data-widget-type="MyWidgetType1"] 

Answer 2

Можно выбрать класс в CSS, используя значение [атрибут], но я не верю, что CSS может обновить этот атрибут.

https://css-tricks.com/almanac/selectors/a/attribute/

Чтобы обновить атрибут вам нужно найти решение JQuery, или аналогичный.

Edit: В JQuery, вы можете обновить атрибут, как это:

$("#fieldId").attr("attribute-name","value you want to set"); 

Answer 3

CSS не HTML. Вы не можете установить или изменить значение атрибута HTML с помощью CSS.

Кроме того, зачем вы это делаете? HTML и CSS существуют из-за разделения проблем. HTML предназначен для контента, а CSS - для презентации. Указание атрибутов данных в CSS не отличается от указания атрибутов презентации в HTML.

Если вы пытаетесь назначить метаданные имени класса, которое затем применяется ко всем элементам с этим именем класса, это (снова) полностью вне сферы действия CSS и просто невозможно в HTML. Единственный способ присвоить метаданные элементу - указать его как атрибут для этого элемента. (Вы можете переместить объявления атрибутов в сценарий, если вы не хотите указывать атрибуты для каждого экземпляра этого класса в разметке, но в конце дня сценарий по-прежнему должен заполнять набор данных каждого элемента этими значениями. в зависимости от ваших потребностей, хотя, это может быть достаточно)

Answer 4

Существует способ, чтобы получить значение ваших атрибутов, но это не поддерживается всеми браузерами:.

https://developer.mozilla.org/en-US/docs/Web/CSS/attr

Я не» t знать, если это то, что вы ищете