欢迎光临一流素材网,免积分免费素材下载!
AD
当前位置:首页 > JS代码 > 其它代码

JS实现文字替换成图片或者其它内容

所属栏目:其它代码更新时间:2014-09-02原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明


一流资源网找到这个JS代码的初衷是在制作一个企业网站时,客户希望产品详情页显示产品的颜色,而且颜色要以图片来代替显示。

原本是这样的:

Snip20140902_76.png


但客户希望这样显示:

Snip20140902_75.png


一般用PHP是可以实现的。

但很多站长或技术人员不懂PHP开发,要实现这个功能就比较困难,那么就可以使用这个JS代码来实现这个功能,虽然效率上比PHP实现差一点。但效果是一样的,


JS代码:

<script type='text/javascript'>
    window.onload=function(){
        var div=document.getElementById('yanseb');
        div.innerHTML=div.innerHTML.replace('<li>红色</li>',"<li class='red'></li>");
        div.innerHTML=div.innerHTML.replace('<li>蓝色</li>',"<li class='blue'></li>");
        div.innerHTML=div.innerHTML.replace('<li>白色</li>',"<li class='white'></li>");
        div.innerHTML=div.innerHTML.replace('<li>黑色</li>',"<li class='black'></li>");
        div.innerHTML=div.innerHTML.replace('<li>银色</li>',"<li class='silver'></li>");
        div.innerHTML=div.innerHTML.replace('<li>黄色</li>',"<li class='yellow'></li>");
}
</script>

将此JS代码放在网页 <head>区即可。

HTML代码示例:

<div id="yanseb">
<ul>
<li>红色</li>
<li>蓝色</li>
<li>白色</li>
<li>黑色</li>
<li>银色</li>
<li>黄色</li>
</ul>
</div>

注意JS代码中的 yanseb  。


这样,在网页运行时就会被JS替换成:

<div id="yanseb">
<ul>
<li class='red'></li>
<li class='blue'></li>
<li class='white'></li>
<li class='black'></li>
<li class='silver'></li>
<li class='yellow'></li>
</ul>
</div>


具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1JS动态五星评分插件代码

2淘宝商品jQuery列表多条件查询特效代码

3兼容所有浏览器的设为首页收藏本站js代码

4JS实现文字替换成图片或者其它内容

5js实现网页多个div定时轮流显示的代码

6IE6旧版浏览器提示升级代码模板下载

7SimplePager-非常简洁优秀的 jQuery 分页插件-同页面可重复使用

8后台登录jquery网页全屏背景图片自动切换代码

9百度404页面JS倒计时返回页面代码

10jQuery公司大事记、历程时间轴专用代码

最新更新的

1JS点击加大/减小字号的代码

2jQuery点击展开与收缩查看更多效果代码

3JqueryPagination分页插件

4一款漂亮方便调用的jQuery前端分页

5JS返回上一页/返回上一页并刷新

6百度404页面JS倒计时返回页面代码

7JS赋值给指定元素的父级元素

8JS实现301跳转的JS代码

9JS拆分文本再组合

10Jquery点击按钮给class设置样式的JS代码