需要深入了解这一小块HTML和Javascript

Question

我在my page上嵌入了“立即申请”按钮。但有几件事让我感到困惑。首先，当我右键单击小部件时，我无法“另存为”图像。猜猜因为它不是图像！如何创建这样的按钮？

其次，当我右键单击页面并查看源代码时，我看到的只是我编写的代码。我认为包含的in.js会将DOM元素附加到文档中，以使该按钮可见。 （例如headElement.appendChild(document.createElement('img'))或类似的东西。为什么如果DOM树中没有嵌入任何东西，那么按钮是如何存在的？如果嵌入了某些东西，那么为什么它们在HTML源代码中不可见？因为当我使用Javascript headElement.appendChild，它也出现在HTML源代码中。

最后但并非最不重要的是，如何检查LinkedIn按钮是否位于iframe中或单独存在？

编辑：我检查了Chrome上的元素，得到的是一堆span标记。还有一个a标记href="javascript:void(0);。那是什么意思？ javascript:void(0)做了什么？

我很欣赏对此的深入见解，因为我对前端开发，html和javascript以及所有内容都很陌生......

任何帮助表示感谢。

Answer 1

该按钮只不过是一些嵌套的span，其中一个用id = 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。

正如另一个答案所说，您可以尝试使用FF + Firebug或Chrome来浏览文档。

Answer 2

真正看到由linkedin代码插入的html的最简单方法是使用Safari或Chrome（或带Firebug的Firefox）等浏览器，然后右键单击按钮并选择Inspect Element。这将为您提供一个很好的DOM视图以及脚本实际对您的文档所做的操作。默认情况下，View Source不会提供此功能。

Answer 3

你是对的，它不是一张图片。它由几个嵌套的跨度和一个应用了各种CSS样式的锚组成。 （CSS中可能包含某个背景图像，但您无法右键单击以保存使用CSS设置的背景图像。）

其次，View Source仅显示Web服务器发送的源。通过脚本进行的任何后续更改都不会反映出来。

您可以使用您选择的浏览器中的开发者工具（例如，Chrome内置了它，或者获取Firebug for Firefox）来查看当前的DOM，这也将回答您的上一个问题。在Chrome中，您可以右键单击并选择“检查元素”以使用预先选择的元素打开开发人员。

编辑问题编辑：href="javascript:void(0);"这应该是什么意思？

拥有href的{​​{1}}将执行javascript: somecode之内的任何内容，而不是导航到类似于＆＃34;正常＆＃34;的网址。 somecode。 void operator基本上评估关联的表达式，然后返回undefined，因此href不做任何事情。把它放在一起，void(0)基本上说'＃34;而不是在某处导航，什么都不做＆＃34;，但是锚标记仍然具有＆＃34;正常＆＃34;的其他行为。通常在你看到这样的设置时，会有一个href="javascript:void(0);"事件处理程序和一些JavaScript来做其他事情（可能涉及或不涉及导航）点击锚点。

许多人认为这是一种不好的做法，因为如果用户关闭了JavaScript，那么锚标记根本不会做任何事情。通常最好让onclick保留一个与点击事件处理程序相同的URL，尽管通常是一个不那么花哨的版本。然后，单击处理程序将取消单击的默认操作，以便该URL的默认导航不会发生，而是会发生其他事情（可能是Ajax调用）。这样大多数用户都会看到更漂亮的行为，但禁用JavaScript的用户仍然可以使用该链接。

Answer 4

我快速看了一下按钮，这里有几点

1. 使用边框radious，渐变，边框顶部等CSS属性来完成按钮

2. 图片精灵用于按钮右侧的linkdin徽标：http://static02.linkedin.com/scds/common/u/img/sprite/sprite_connect_v13.png

3. 最后，就该按钮的样式而言，我没有检测到任何javascript

如果我错过了什么，请告诉我:)