Нужна проницательность в понимании этого небольшого фрагмента HTML и Javascript

Question

Я вложил кнопку LinkedIn Apply Now на my page. Но меня несколько путают. Прежде всего, когда я нажимаю правой кнопкой мыши на виджет, я не могу «сохранить как» изображение. Угадайте, потому что это не образ! Как создается такая кнопка?

Во-вторых, когда я нажимаю правой кнопкой мыши на странице и просматриваю источник, все, что я вижу, это код, который я написал. Я думал, что включенный in.js добавит элементы DOM в документ, чтобы сделать эту кнопку видимой. (например, headElement.appendChild(document.createElement('img')) или что-то в этом роде.Как получилось: если в дерево DOM ничего не встроено, как эта кнопка есть? Если что-то встраивается, то почему они не видны в исходном коде HTML? Потому что когда я headElement.appendChild что-то от с помощью Javascript, он появляется в источнике HTML, а также

и последнее, но не в последнюю очередь, как я могу проверить, если эта кнопка LinkedIn стоит там в IFRAME или сам по себе

EDIT:.? Я осмотрела элемент в Chrome и то, что я получаю, это куча span тегов. Также есть тег a с href="javascript:void(0);. Что это значит? Что такое javascript:void(0) делать?

Я был бы признателен за глубокое понимание этого, как я довольно новыми для фронтального развития, HTML и Javascript и все ...

Любая помощь приветствуется.

Answer 1

Кнопка является не более, чем несколько вложенных друг в друга span с, один из которых, с идентификатором = li_ui_li_gen_1325073350899_0-logo стилизован с помощью CSS, чтобы иметь фоновое изображение, указывая на http://static02.linkedin.com/scds/common/u/img/sprite/sprite_connect_v13.png

Обратите внимание, что этот образ содержит другие вещи, кроме фон кнопки. Это потому, что они используют метод, называемый CSS sprites.

Действительно, большая часть работы выполняется in.js-файлом. Однако, если вы просмотрите код, вы увидите, что оно было уменьшено, поэтому немного (но не совсем невозможно, это действительно хорошее упражнение), чтобы пройти через код.

И, наконец, нет, нет iframe, всего лишь связка span s.

Как говорится в другом ответе, вы можете попробовать использовать FF + Firebug или Chrome для изучения документа.

Answer 2

Самый простой способ увидеть HTML-код, который был вставлен связанным кодом, - использовать браузер, такой как Safari или Chrome (или Firefox с Firebug), и нажать правой кнопкой мыши кнопку и выбрать «Проверить элемент». Это даст вам хороший обзор DOM и то, что сценарий действительно сделал с вашим документом. Источник просмотра не дает вам этого по умолчанию.

Answer 3

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

Во-вторых, View Source показывает только источник, отправленный веб-сервером. Любые последующие изменения, выполненные с помощью скрипта, не будут отражены.

Вы можете использовать инструменты разработчика из вашего браузера по вашему выбору (например, Chrome он создал или, например, Firebug для Firefox), чтобы просмотреть текущую DOM, которая также ответит на ваш последний вопрос. В Chrome вы можете щелкнуть правой кнопкой мыши и выбрать «Осмотреть элемент», чтобы открыть элемент разработчика с выбранным элементом.

EDIT для вопроса edit: href="javascript:void(0);" Что это должно означать?

href, который имеет javascript: somecode будет выполняться независимо от того somecode есть вместо навигации к URL, как для «нормальной» href. void operator в основном оценивает связанное выражение и затем возвращает undefined, поэтому void(0) ничего не делает. Объединив это вместе, href="javascript:void(0);" в основном говорит «вместо того, чтобы где-то перемещаться, ничего не делать», но тег привязки все еще имеет другое поведение «нормального» якоря с точки зрения внешнего вида, являющегося таблостопом и т. Д. Обычно там, где вы видите такую ​​настройку также будет обработчик события onclick с некоторым JavaScript, чтобы сделать что-то еще (что может включать или не включать навигацию), когда пользователь нажимает на якорь.

Многие считают это плохой практикой, потому что, если у пользователя отключен JavaScript, якорный тег вообще ничего не сделает. Как правило, лучше оставить href с URL-адресом, который эквивалентен тому, что делает обработчик события клика, хотя обычно это менее причудливая версия. Затем обработчик клика отменит действие по умолчанию для щелчка, так что по умолчанию навигацию к этому URL-адресу не произойдет, и вместо этого произойдет что-то еще (возможно, вызов Ajax). Таким образом, большинство пользователей увидит поведение фанов, но пользователи с отключенным JavaScript все еще могут использовать эту ссылку.

Answer 4

Я дал кнопку быстрый взгляд, здесь я несколько точек

1. Использует CSS свойства, такие как границы radious, градиенты, границы сверху и т.д., чтобы дать закончить к кнопке

2. спрайтов находящейся используется для LinkdIn логотип справа от кнопки: http://static02.linkedin.com/scds/common/u/img/sprite/sprite_connect_v13.png

3. Наконец, я не обнаружил каких-либо JavaScript, насколько стиль этой кнопки обеспокоен

Если я что-то пропустил, просто дайте мне знать :)