Комментарий: когда вы говорите о «HTML5» в толпе, вы можете почувствовать себя экзотической танцовщицей или единорогом, приходящим в середину дома с явным значением «Я крутой, я это знаю»
Это нельзя сказать, что мы тщеславен. Основной HTML API не развивался в последние несколько лет, так что, когда появляется небольшая новая особенность, такая как Placeholder, это даст нам новый вид. Хотя многие функции HTML5 реализованы в новых браузерах, большинство программистов до сих пор не знают и не слышали о каких -либо маленьких, очень полезных API. В этой статье я представлю некоторые такие API и приветствую всех, чтобы открыть для себя более неизвестные API HTML5!
Element.classlist
API ClassList обеспечивает основную функцию управления CSS, которую мы реализовали за эти годы с использованием библиотеки инструментов JavaScript:
// Добавить класс CSS
myelement.classlist.add ("newclass");
// Удалить класс CSS
myelement.classlist.remove ("существующий клин");
// Проверьте, есть ли у вас класс CSS
myelement.classlist.contains ("OneClass");
// Обратите внимание на существование или нет класса CSS
myelement.classlist.toggle ("Другой class");
Основное значение этого недавно появляющегося API: прост и практично.
Contextmenu API
Этот новый API ContextMenu очень полезен: он не заменяет оригинальное мнение правой кнопкой мыши, но добавляет ваше пользовательское меню правой кнопкой мыши в меню правой щелчки в браузере:
<раздел contextmenu = "mymenu">
<!-Добавить меню->
<меню тип = "контекст">
<menuitem label = "rebresh post" icon = "/images/refresh-icon.png"> </menuitem>
<меню метка = "Поделиться на ..." icon = "/images/share_icon.gif">
<menuitem label = "Twitter" icon = "/images/twitter_icon.gif"> </menuitem>
<menuitem label = "facebook" icon = "/images/facebook_icon16x16.gif"> </menuitem>
</menu>
</menu>
</section>
Следует отметить, что лучше всего использовать JavaScript для динамического создания этих кодов меню, потому что событие меню в конечном итоге позвонит JavaScript для выполнения задач. Если пользователь запрещает JavaScript, меню правой мыши не будет создано, и он не увидит меню одновременно.
Element.dataset
Используя API набора данных, программисты могут легко получить или установить Data-* Пользовательские свойства:
/* Следующий код является примером
<div Data-name = "myDiv" data-id = "myId" data-my-custom-key = "Это значение"> </div>
*/
// Получить элементы
var element = document.getElementbyId ("myDiv");
// получить идентификатор
var id = element.dataset.id;
// Читать значение "Data-My-Custom-Key"
var customkey = element.dataset.mycustomkey;
// изменять другие значения
element.dataset.mycustomkey = "какое -то другое значение";
// оказаться:
// <div Data-name = "myDiv" data-id = "myId" data-my-custom-key = "какое-то другое значение"> </div>
Само собой разумеется, это так же просто и практично, как и ClassList
Window.postmessage API
Даже IE8 поддерживал API Postmessage в течение многих лет. Функция API Postmessage заключается в том, что он позволяет передавать информационные данные между двумя окнами браузера или iframes:
// из окна или iframe на домене A, отправьте сообщение в окно или ifame в домене B.
var iframeWindow = document.getElementById ("iframe"). ContentWindow;
iframewindow.postmessage ("Приветствия из первого окна!"); </p> <p> // Прием сообщения в окне или iframe во втором другом домене
window.addeventlistener ("message", function (event) {
// проверить законность домена
if (event.origin == "http://www.vevb.com") {
// Информация о выводе журнала
console.log (event.data);
// Сообщение обратной связи
event.source.postmessage («Как ты в порядке!»);
}
]);
Тело сообщений может быть только строкой, но вы можете использовать json.stringify и json.parse для преобразования сообщений в более значимые тела данных!
Атрибут автофокуса
Атрибут AutoFocus может создавать кнопку, входные или текстовые элементы автоматически стать фокусом страницы при загрузке страницы:
<input autoFocus = "AutoFocus" />
<Button AutoFocus = "AutoFocus"> HI! </Button>
<textarea autofocus = "AutoFocus"> </textarea>
В таких местах, как страницы поиска Google с фиксированными шаблонами, свойство AutoFocus является идеальной функцией.
Браузер поддерживает каждый API немного по -разному, поэтому проверьте поддержку этих функций перед использованием их. Потратьте некоторое время, чтобы прочитать подробное описание каждого API, и я считаю, что вы найдете больше.