动态更换网页的背景图

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> 

 

转载于:https://www.cnblogs.com/qingsong/p/5255292.html