 |
Главная Случайная страница Контакты | Мы поможем в написании вашей работы! | |
Исправьте значение заказного атрибута
|
|
view sourceprint?
1.var theDiv = document.getElementById('myDiv');
2.var attr = theDiv.getAttribute('data-custom-attr');
3.alert(attr); // My Val
Это также может быть использовано в вашем CSS, подобно этому глупому тексту, исправляющему примеру.
view sourceprint?
01.<!DOCTYPE html>
02.
03.<html lang="en">
04.<head>
05.<meta charset="utf-8">
06.<title>Sort of Lame CSS Text Changing</title>
07.<style>
08.
09.h1 { position: relative; }
10.h1:hover { color: transparent; }
11.
12.h1:hover:after {
13.content: attr(data-hover-response);
14.color: black;
15.position: absolute;
16.left: 0;
17.
18.}
19.</style>
20.</head>
21.<body>
22.
23.<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me </h1>
24.
25.</body>
26.</html>
Вы можете просмотреть демо этого примера на JSBIN.
Элемент Output
Как вы, вероятно, предположили, элемент output используется для отображения своего рода вычислений. Например, если вы хотите отобразить координаты позиции курсора или сумму чисел, эта информация должна быть помещена в элемент output.
Как простой пример, давайте, используя JavaScript, вставим сумму двух чисел в пустой output, когда будет нажата кнопка подтверждения форы (submit).
view sourceprint?
01.<form action="" method="get">
02.<p>
03.10 + 5 = <output name="sum"></output>
04.</p>
05.<button type="submit"> Calculate </button>
06.</form>
07.
08.<script>
09.(function() {
10.var f = document.forms[0];
11.
12.if (typeof f['sum']!== 'undefined') {
13.f.addEventListener('submit', function(e) {
14.f['sum'].value = 15;
15.e.preventDefault();
16.}, false);
17.}
18.else { alert('Your browser is not ready yet.'); }
19.})();
20.</script>
Испытайте это непосредственно.
Пожалуйста, отметьте, что поддержка этой технологии, всё ещё работает плохо. На момент написания этой статьи, я был в состоянии заставить это работать только в Opera, что и отражено в коде выше. Если браузер не распознаёт этот элемент, он просто выведет сообщение об ошибке. В противном случае, он выведет значение под именем "sum", и установит его равным 15, соответственно, после того, как форма подтверждена.
Этот элемент может также получить атрибут for, который отражает название элемента, с которым связан output, подобно тому, как работает label.
Создание бегунков с Range Input
HTML5 вводит новый тип input – range.
view sourceprint?
1.<input type="range">
Особенно, это получает атрибуты min, max, step и value среди других. Хотя, кажется, только Opera поддерживает этот элемент полностью прямо сейчас, это будет фантастически, когда мы сможем полностью использовать эти функции!
Для быстрой демонстрации, давайте сделаем датчик, который позволит пользователям решить насколько удивителен "Total Recall". Мы не будем встраивать реальное решение для последовательного опроса, но мы сделаем обзор того, как это могло быть сделано весьма легко.
Дата публикования: 2014-11-18; Прочитано: 320 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!
