CSS+Js在段落文字最后自动加入隐藏文字

转载于 2015-07-12 01:49:00 发布 · 65 阅读

·

0

·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lizonghai/p/4639778.html

文章标签：

本文介绍如何使用CSS和JavaScript在段落末尾自动添加隐藏的文字链接，并给出具体实现代码。同时，讨论了不同浏览器下overflow属性的兼容性问题及其解决方案。

CSS+Js在段落文字最后自动加入隐藏文字

CSS和JavaScript控制段落最后自动添加指定的隐藏文字，不建议这样用，因为对搜索引擎不太友好。不过作为一项技巧来研究，下面帖出具体的代码，以供参考指正：

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02 <html xmlns="http://www.w3.org/1999/xhtml">

03 <head>

04 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

05 <title>自动加入隐藏文字</title>

06 <style>

07 .test {color:#fff;margin-left:18px;}

08 </style>

09 </head>

10 <body>

11 <p>在文章各个段落的最后加入带连接的隐藏文字</p>

12 <p>在文章各个段落的最后加入带连接的隐藏文字</p>

13 <script>

14 function test()

15 {

16 var myP = document.getElementsByTagName("p");

17 for(var i=0;i<myP.length;i )

18 {

19 var createLink = document.createElement("a");

20 createLink.setAttribute("class","test");

21 createLink.setAttribute("href","http://www.baidu.com/");

22 createLink.setAttribute("target","new");

23 var createText = document.createTextNode("百度一下");

24 createLink.appendChild(createText);

25 myP[i].appendChild(createLink);

26 }

27 }

28 window.onload = function() {test();}

29 </script>

30 </body>

31 </html>

这里忘了一个很重要的内容需要说明：并不是所有的overflow属性效果都一样，比如visible属性就只能对IE起作用。这样的话就有一个问题啦，如果要有高度，而且内容超出高度的时候，定义auto或hidden都可能会有一些不想要的效果出现。在这里提供一个解决方案：对于IE6及以下版本的IE，可以直接定义高度；对于IE8、火狐、Opera、Chrome可定义min-height。方法如下：

view source

print ?

1 overflow{

2 height:auto;

3 _height:200px;

4 min-height:200px;

5 verflow:auto;

6 zoom:1;

7 _overflow:visible;

8 }

转载于:https://www.cnblogs.com/lizonghai/p/4639778.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。