>您在那里很乐意浏览一个网站；您单击一个链接，突然发现自己在另一个网站上下载文件。那里发生了什么？烦人，不是吗？必须有一种更好的方法向您的访问者指示链接要去的地方以及哪种类型的文件。因此，为了帮助解决这个小小的烦恼，我写了一些JavaScript和CSS，这些JavaScript和CSS在链接之后添加了很小的图标（取决于文件扩展名和位置），以向用户指示他们将要加载的文档的类型。
>
钥匙要点
>简单性 - 必须易于使用
>在开始之前，我想承认Mark James在Famfamfam上的优秀和免费的丝绸图标，我们将在本文中使用。
>
>此外，值得信用的信用：本文的灵感来自亚历山大·凯撒（Alexander Kaiser）与CSS的Iconize TextLinks的启发，这反过来又受到了CSS Guy与CSS展示超链接提示的启发。此外，我使用了Sitepoint自己的詹姆斯·爱德华兹（James Edwards）撰写的几个出色的功能，还有一些从凯文·扬克（Kevin Yank）和卡梅伦·亚当斯（Cameron Adams）撰写的核心JavaScript库中，并在SitePoint Book中不朽，只需JavaScript。
那么如何工作？为使其全部起作用，涉及三个文件：
>
让自己感到舒适，我们将深入研究内部的工作。
配置
在文件顶部，您会看到所有配置变量：classprefix，classexternal和classiconloc。
哪些链接将收到图标？
>
要定义链接所输入的文件类型，我们将查看文件扩展名。文件类型分为两组：具有唯一图标的文件，例如洪流文件，以及将共享相同图标但具有不同文件扩展名的那些图标，例如flash文件（.fla和.swf）。
>分组分组的共享相同图标的文件扩展名可以为您节省数百个CSS类和图标。为了实现这一目标，我创建了两个阵列。>第一个数组，单个ClassArray，将所有链接的文件扩展包含单个图标。 CSS类名称的基础与文件扩展名相同。也就是说，文本文件用“ txt”引用，CSS类名称是ClassPrefix（较早设置）和“ TXT”基础CSS类名称，在这种情况下，将CSS类称为“ IKON_TXT”。
第二个数组，ClassArray实际上是一个多维阵列，但不要让您失望。基本上，这是根据我们想使用的图标类型进行分组的一组单独阵列。此数组中的第一个项目是单个ClassArray（此数组必须始终是第一个数组）。以下数组与先前的数组相似，其中一个重要区别：每个数组中的第一个项目是将要使用的CSS类的名称，以下项目是需要该类的文件扩展名。在下面的示例中，.swf和.fla文件扩展名将与“ flash” CSS类关联。
a[href$='.doc'] { <br>
display: inline-block; <br>
padding-left: 16px; <br>
background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}注意：文件扩展名排除点，即xls而不是.xls。
classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.
为了最大的可移植性，实际使用的CSS类名称将具有一个前缀，例如“ ikon_”，我们先前配置了，但是在这些数组中，我们
>外部链接
>要确定链接是否是外部站点，我们需要知道当前页面的主机名。为此，我们使用：
>这是当前文档的位置，并使用合格Href功能获取域名，以确保我们具有完全合格的地址和Parseurl功能以获取主机名。 （这两个功能都是由我们的居民JavaScript Guru，BrotherCake撰写的，并在他的博客文章中涵盖了）。 稍后，当我们为外部链接添加类时，我们将使用此主机名来确定该链接是否在我们的网站外部。
实际上完成工作的代码
>classExternal is the name of the CSS class you want to use to show a link to an external site.
我们通过再次使用parseurl并再次使用限定性来执行此操作。
首先，以a元素的href值：
linkhref = aelements [iv] .href;接下来，解析值以获取有关链接的更多信息：
> ourl = parseurl（premifyhref（linkHref））;
然后获取链接的扩展名：
fileext = ourl.extension;
a[href$='.doc'] { <br>
display: inline-block; <br>
padding-left: 16px; <br>
background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}>
>要找出是否需要添加图标，我们将将链接的文件扩展与数组中列出的每个扩展名进行比较。
classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.
classExternal is the name of the CSS class you want to use to show a link to an external site.
>解决链接是否与外部站点的链接只是一种比较我们先前在配置区域中设置的URL确定的URL主机名的情况。
如果是真的，我们将在锚点中附加一个新的图像元素，添加源和ID，然后为图像添加一个alt and Title属性。我们添加了额外的图标，而不仅仅是分配一个类以清楚地表明此链接已列为另一个站点，并在图标中添加标题和alt属性。
externalIconLoc is the location of the image to use for the external icon.
CSS类
IndividualClassArray = Array('txt', 'xls', 'css', 'torrent');现在回到CSS文件。
>这是我们的CSS类，将图标添加到.doc文件中。请注意，类名称为“ ikon_”，然后是文件扩展名为“ doc”。该课程基本上在顶部和底部以及链接的右侧放了一点填充物。然后，它将图标的背景图像添加到该空间中。
对于我们的外部链接图标，我们将使用略有不同的类结构。我们添加一些填充顶部和底部以确保我们的图标无边界。
classArray = Array( <br>
IndividualClassArray, <br>
Array('flash', 'swf', 'fla') <br>
);如果您更改了ClassPrefix变量，请不要忘记更改这些类名称以匹配。
url = parseURL(qualifyHREF(document.location.href)).hostname;
限制
结论
创建超链接，使用JavaScript创建超链接涉及操纵文档对象模型（DOM）。您可以创建一个新的锚点元素，设置其HREF属性，然后将其附加到文档正文上。这是一个简单的示例：
var link = document.createelement（'a''）;
link.href =“ https：//www.example.com”;
link.textContent =“ go xplox example.com”;我们要链接到的页面的URL。然后，我们设置链接的文本，最后将链接附加到文档正文。
>
>如何使用JavaScript？
link.href =“ https：//www.example.com”;
链接>属性设置为“ _blank”，这意味着该链接将在新窗口或选项卡中打开。
>我如何使用JavaScript？
>使用“标题”属性添加超链接标题。此属性提供了有关链接的其他信息，例如链接文档的名称，并且当鼠标在链接上移动时通常以工具提示表示。以下是一个示例：
var link = document.createelement（'a''）;
>如何使用JavaScript？
如何使用“ removeChild”方法删除超链接。此方法删除了指定元素的指定子节点。这是一个示例：
var link = document.getElementById（'myLink'）;
link.parentnode.removechild（link）;
在此代码中，我们首先通过其ID获取链接元素，然后从其父节点中删除它。
更改超链接的文本？此属性设置或返回指定节点的文本内容及其所有后代。以下是一个示例：
var link = document.getElementById（'myLink'）;
link.textContent =“新链接text”;
在此代码中，我们首先通过其ID获取链接，然后将其文本内容更改为“新链接”。 “样式”属性。此属性用于从元素添加，更改或删除内联样式。这是一个示例：
link.style.style.fontsize =“ 20px”;
>使用“ AddeventListener”方法将事件侦听器添加到超链接中。此方法将事件处理程序附加到指定元素。以下是一个示例：
var link = document.getElementById（'myLink'）;
}）; 在此代码中，我们首先通过link exter a单击“”事件，然后将事件连接到一个事件，然后将其附加到事件。当单击链接时，将显示一个警报框。
>
>如何防止超链接使用JavaScript使用JavaScript？
var link = document.getElementById（'myLink'）;
link.addeventListener（'click'click'，function（event）{
>
>
下载可以使用“下载”属性创建文件的超链接。此属性指定当用户单击超链接时，将下载目标。以下是一个示例：
var link = document.createelement（'a''）;
在此代码中，我们首先创建一个新的锚点元素，然后将其HREF属性设置为我们要下载的文件的URL。然后，我们将下载属性设置为文件的名称，最后将链接附加到文档正文中。
>可以使用HREF属性中的“ MailTo：”协议创建电子邮件客户端的超链接。该协议通过一条新消息打开用户的电子邮件客户端，可以发送。以下是一个示例：
var link = document.createelement（'a''）;
link.href =“ mailto：example@example.com”;
link.textcontent =“ emage me”; emage me';
document.body.body.body.appendchild.appendchild（link）; link）; link）; 我们首先创建一个新的锚点，然后设置其设置HER， “ mailto：example@example.com”。然后，我们设置了链接的文本，并最终将链接附加到文档正文。
以上是JavaScript有用的超链接的详细内容。更多信息请关注PHP中文网其他相关文章！
