CSS在文章每段后添加带链接的隐藏文字
代码主要理解３个参
数：createElement、createTextNode、appendChild。这３个js参数分别是创建元素、创建字符、追加节点。代码原
理：循环页面段落标签<p>，创建连接元素<a>，创建要显示的连接字符，用
SetAttribute定义元素a的样式
代码主要理解３
个参数：createElement、createTextNode、appendChild。这３个js参数分别是创建元素、创建字符、追加节点。代码
原理：循环页面段落标签<p>，创建连接元素<a>，创建要显示的连接字符，用SetAttribute定义元素a的样式和连接
地址。在循环标签<p>后追加创建的元素<a>。
完整的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.test {color:#fff;margin-left:18px;}
</style>
</head>
<body>
<p>如何在文章的每段后添加带链接的隐藏文字？</p>
<p>如何在文章的每段后添加带链接的隐藏文字？</p>
<p>如何在文章的每段后添加带链接的隐藏文字？</p>
<script>
function test()
{
var myP = document.getElementsByTagName("p");
for(var i=0;i<myP.length;i++)
{
var createLink = document.createElement("a");
createLink.setAttribute("class","test");
createLink.setAttribute("href","http://www.codepub.com");
createLink.setAttribute("target","new");
var createText = document.createTextNode("源码网");
createLink.appendChild(createText);
myP[i].appendChild(createLink);
}
}
window.onload = function() {test();}
</script>
</body>
</html>
分享到：
相关推荐
因此，`text-indent`在保持链接功能的同时隐藏文字，是一种更优的选择。 4. **响应式设计**：在响应式布局中，需要考虑不同屏幕尺寸下`text-indent`的值可能需要调整，以确保在所有设备上都能正确隐藏文字。 总结...
### CSS文章列表滑动门混排、文字、滚动效果知识点解析 #### 一、滑动门技术概述 在网页设计中，“滑动门”技术是一种常见的布局技巧，主要用于创建复杂且具有动态效果的导航菜单或者按钮等元素。该技术的核心在于...
这段CSS代码将文字定位在幻灯片的底部中央，并设置了黑色半透明背景，使其在图片上清晰可见。 3. **JavaScript交互**： 为了实现幻灯片的切换效果，我们需要使用JavaScript。这里可以使用一个简单的定时器和索引来...
"jquery左右滑动弹出隐藏文字层"就是这样一种实用的交互效果，它能够在不占用过多屏幕空间的情况下，有效地传递信息。本文将深入探讨这一技术的实现原理和步骤。 一、jQuery基础 jQuery是一个轻量级的JavaScript库...
这段代码会在用户将鼠标悬停在菜单项上时，通过`slideToggle()`方法显示或隐藏其子菜单（假设`<li>`元素包含一个类名为`sub-menu`的`<ul>`）。 总结一下，创建一个CSS3棕色渐变导航菜单涉及以下几个关键点： 1. ...
2. 定义CSS样式，用于隐藏超出部分的文字和添加省略号。这里我们可以创建一个类，例如`truncated`，并设置`overflow`和`text-overflow`属性。 ```css .truncated { overflow: hidden; text-overflow: ellipsis; ...
文字居中可以通过 CSS 属性 `text-align:center` 来实现，这将使文本在其容器内水平居中对齐。在给定的代码段中，`<input id='user' class='user' type='text'>` 的属性选择器写法是 `[type='text']`，这意味着你...
"jQuery 鼠标滑过链接文字弹出层提示的效果"是一个典型的 jQuery 功能应用，它通过用户鼠标悬停在链接上时显示相关信息，提升用户对链接内容的理解。 这个压缩包包含了一个使用须知.txt 文件和一个可能为 HTML、CSS...
总结起来，这个完全CSS写的鼠标悬停tip效果通过利用CSS的伪类选择器和定位属性，实现了当鼠标悬停在链接上时，一个带有自定义样式的提示信息框出现的效果。这种方法在现代网页设计中很常见，因为它可以为用户提供...
本篇文章将深入探讨“CSS的文本提示”，帮助你创建美观且功能强大的文本提示效果。 一、文本提示的基础概念 文本提示，通常指的是当鼠标悬停在某个元素上时，显示的额外信息，如`title`属性。这些提示可以提供额外...
例如，可以设置一个计时器，当时间到达特定时刻，弹出一个带有定制消息的对话框，或者利用JavaScript的事件监听器在用户点击某个元素后显示特别的动画效果。 在“website_models”压缩包中，可能包含了这个项目的...
例如，在文章标题或链接上应用:hover效果，可以增加用户的交互体验，使鼠标悬停时有明显的视觉反馈。 此外，CSS3的过渡(transitions)和动画(animations)为动态效果提供了可能。过渡可以平滑地改变一个或多个CSS属性...
在描述中提到的博文链接指向了ITEYE博客上的一篇文章，作者liuyt611分享了关于如何实现这种效果的具体方法。由于没有给出实际的描述内容，我们只能基于通常的做法进行解释。 实现文字向上无缝滚动，通常会采用以下...
HTML（HyperText Markup Language）是用于创建网页的标准标记语言，它的主要功能是通过使用一系列的标签来描述页面结构和内容。...要在新窗口打开链接，需在 `<a>` 标签中设置 `target="_blank"` 属性。
在个人博客中，这些元素常用于组织文章、导航菜单和侧边栏。 2. **CSS样式** CSS让网页更具视觉吸引力。通过选择器（如类名或ID名）定位HTML元素，并应用样式属性，如颜色、字体、大小、背景、边框和布局。例如，`...
本篇文章将深入分析一份“非常优秀的下拉菜单 DIV+CSS 源码”，该源码通过纯 CSS 实现了一个简洁且实用的下拉菜单效果。下拉菜单在网页设计中非常常见，尤其是在导航栏的设计上，它可以帮助用户快速找到所需的信息或...
22、自动、随机的在每段尾部添加自定义的信息（◆商业版，◇待开发） 23、分页防采集 24、全文文章防采集（◆商业版，◇待开发） 四、淘宝客 1、支持淘宝客功能1：排行榜+文章系统 2、支持淘宝客功能2：店铺...
11、设置关键字及链接，自动在文章内容中添加关键字链接，增强SEO优化 12、发布文章，增加标题颜色和外部连接； 十二、首页底部的单页相关栏目，如联系我们，关于我们等可后台进行编辑修改相关内容 十三、支持单...
这段代码在文档加载完成后，为`#hover-image`元素添加了hover事件监听器。当鼠标进入图片区域，`fadeIn(200)`方法会让`#hover-content`以200毫秒的速度淡入显示；当鼠标离开，`fadeOut(200)`则会使文字内容淡出隐藏...