动态更换网页的背景图
2016-03-08 19:30
381 查看
function doChangeBkg(){ var bkgUrl = document.getElementById("inputBkgUrl").value; //alert(bkgUrl); var repeateMode = document.getElementById("inputRepeatMode").value; var s="<style type='text/css'>body{ background-repeat : "+repeateMode+" !important; background-image:url(\""+bkgUrl+"\") !important; } </style>"; document.getElementById("outputDiv").innerHTML = s; //alert(s); //$("#outputDiv").html(s); }
<div> 背景图片URL:<input type="text" size="60" id="inputBkgUrl" /> <br /> 背景图片重复方式: <select id="inputRepeatMode"><option value="repeat" selected="selected">repeat</option><option value="no-repeat">no-repeat</option><option value="repeat-x">repeat-x</option><option value="repeat-y">repeat-y</option></select> <input type="button" onclick="doChangeBkg()" value="确定更换" /> </div> <div id="outputDiv"></div>
如何实现
很简单,下面是 JQuery 代码:function doChangeBkg() { var bkgUrl=$("#inputBkgUrl").val(); var repeateMode=$("#inputRepeatMode").val(); var s="<style type='text/css' > body{ background-repeat : "+repeateMode+"; background-image:url(\""+bkgUrl+"\"); } </style>"; $("#outputDiv").html(s); }
原生JavaScript代码:
function doChangeBkg() { var bkgUrl=$("#inputBkgUrl").val(); var repeateMode=$("#inputRepeatMode").val(); var s="<style type='text/css' > body{ background-repeat : "+repeateMode+"; background-image:url(\""+bkgUrl+"\"); } </style>"; $("#outputDiv").html(s); }
前端代码:
<div> 背景图片URL:<input type="text" size="60" id="inputBkgUrl" /> <br /> 背景图片重复方式: <select id="inputRepeatMode"><option value="repeat" selected="selected">repeat</option><option value="no-repeat">no-repeat</option><option value="repeat-x">repeat-x</option><option value="repeat-y">repeat-y</option></select> <input type="button" onclick="doChangeBkg()" value="确定更换" /> </div> <div id="outputDiv"></div>
相关文章推荐
- 【FastDFS分布式文件系统之二】:FastDFS小文件上传性能测试及Python客户端上传操作
- 操作系统用C语言模拟进程基于优先级的调度程序
- uva 11346 Probability
- EXTJS 中 radiogroup 的各项所占的宽度不同的解决办法
- 就拿胖子说事2
- 第1周项目1 —宣告“主权”
- [Audio processing] 数据集生成 & 性别年龄分类训练 Python
- zoj3875 Lunch Time(水,但有意思)
- ZOJ 3919 Ellipse(数学)
- 移动平台游戏网络重连方案
- 第二周项目:就拿胖子说事
- SpringMVC入门示例(二)
- 简单浅谈 电鱼机的脉宽、频率、占空比
- Codeforces--630E--A rectangle(规律)
- 关于Microsoft Project默认开始时间错误问题
- 禁止U盘自动弹出
- C#中StreamReader读取中文出现乱码
- sonarqube分析实例工程
- bzoj 1189(拆点最大流)
- 联合体和结构体