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

Question

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

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

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

编辑：我检查了Chrome上的元素，我得到的是一堆span标签。 还有a带有href="javascript:void(0); a标签。那是什么意思？ 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_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);" 那是什么意思？

一个具有javascript: somecode的href javascript: somecode将执行somecode而不是导航到一个url，就像“普通” href 。 void运算符基本上计算关联的表达式，然后返回undefined，因此void(0)不执行任何操作。 把它放在一起， href="javascript:void(0);" 基本上说“不是在某个地方导航，什么也不做”，但是锚标签在外观方面仍然具有“正常”锚点的其他行为，是一个tabstop等。通常在你看到这样一个设置的地方也会有一个onclick事件处理程序与一些JavaScript在用户单击锚点时执行其他操作（可能涉及或不涉及导航）。

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

Answer 4

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

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

2. Image Sprites用于按钮右侧的linkdin徽标： http ：//static02.linkedin.com/scds/common/u/img/sprite/sprite_connect_v13.png

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

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