动态更换网页的背景图
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>