Как взаимодействовать с объектными атрибутами с помощью функции attr () CSS3

Как взаимодействовать с атрибутами объекта с помощью attr () функции CSS3 - манекены

Функция attr () интересна тем, что позволяет вам взаимодействовать с любым атрибутом объекта как частью стиля. Вы видите, что эта функция используется несколькими уникальными способами в Интернете, хотя, по всей видимости, это хорошо сохранившийся секрет.

Один сайт, демонстрирующий быстрое приложение, основанное на attr (), - The New Hotness: Using CSS3 Visual Effects. Следующая процедура демонстрирует функцию attr () более простым способом, так что вы можете лучше понять несколько примеров онлайн, которые демонстрируют это детально.

  1. Создайте новый HTML5-файл в текстовом редакторе.

  2. Введите следующий код для страницы HTML.

     Использование функции attr () 

    Использование функции attr ()

    World

    Все, что у вас есть, это заголовок и абзац. Обратите внимание, что параграф определяет стандартный атрибут, id и нестандартный атрибут TestText. Атрибут, который вы используете для функции attr (), не обязательно должен быть стандартным - вы можете определить любой желаемый атрибут.

  3. Сохраните файл как Attr. HTML.

  4. Создайте новый CSS-файл с помощью текстового редактора.

  5. Введите следующую информацию о стиле CSS.

     #TestMe: before {content: attr (TestText);} 

    Стиль начинается с того, что вывод из стиля должен появляться перед тегом, на который ссылается TestMe как id. Затем он устанавливает содержание этой области в текущее значение атрибута TestText с помощью функции attr ().

  6. Сохраните файл как Attr. CSS.

  7. Загрузите пример Attr.

    Результат - это то, что вы ожидаете, Hello World. Функция attr () позволяет вам скрыть и использовать всевозможные сведения на ваших страницах, повторно использовать информацию по-разному или даже выполнять задачи отладки.