Когда вы смотрите на HTML, вы часто видите использование роли данных, темы данных и т. д. Например, эффекта заголовка можно добиться с помощью следующего кода:
<div data-role=header> <h1>Я — заголовок</h1> </div>
Почему при написании заголовка data-role=header можно добиться эффекта черного нижнего и центрированного текста?
В этой статье представлен простейший метод реализации, позволяющий каждому интуитивно понять эти способы использования.
Пишем HTML-страницу и настраиваем атрибут data-chb=header. Мы надеемся, что цвет фона области div с этим атрибутом будет черным, текст — белым и будет отображаться в центре элементов div; Если у вас нет пользовательского атрибута data-chb, он будет отображаться по умолчанию, HTML-код будет следующим:
<body> <div data-chb=header> <h1>Я использовал пользовательский атрибут data-chb для div</h1> </div> <br/> <div> Я не использовал пользовательский атрибут data-chb . , отображайте его так, как хотите </div> </body>;
Чтобы добиться эффекта отображения, при котором цвет фона черный, текст белый, а отображение центрируется, мы определяем следующий CSS:
<style> .ui_header { цвет фона: черный; выравнивание текста: центр; цвет: белый; граница: 1 пиксель #000 } </style>Затем мы используем следующий метод js для динамического добавления определений CSS и изменения стиля отображения элементов div с атрибутами data-chb при загрузке страницы:
<script type=text/javascript> window.onload=function(){ var elems = document.getElementsByTagName(div); if(elems!=null&&elems.length>0){ var length = elems.length; //Обход всех элементов DIV; Control for(var i=0;i<length;i++){ var elem = elems[i] //Получаем пользовательские атрибуты элемента управления var customAttr = elem.dataset.chb; //Вы также можете получить пользовательские атрибуты следующим способом //var customAttr = elem.dataset[chb] //Если это значение заголовка, которое мы предопределили, это означает, что оно должно быть обработано if(customAttr==header ){ //Добавляем стиль elem.setAttribute(class,ui_header } } } } </script>Конечно, помимо вышеперечисленных функций, у этого атрибута есть и другие функции, такие как построение данных через JS, заполнение данных и т. д.;
Подвести итогВыше приведен атрибут HTML5: data-, представленный вам редактором. Надеюсь, он будет вам полезен. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!