我们来直接看示例
代码如下
javascriptchangecsstextbox.html
<!doctype html><html><head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function setcolor(forecolor, backcolor) { target = document.getelementbyid("page"); if (target != null) { target.style.backgroundcolor = document.form1.text1.value;; target.style.color = document.form1.text2.value; } } </script></head><body id="page"> <form name="form1"> <div>背景色<input id="text1" type="text" /></div> <div>前景色<input id="text2" type="text" /></div> <input id="button1" type="button" value="button" onclick="setcolor()"/> </form></body></html>
说明：
单击表单上的按钮执行用javascript编写的setcolor（）函数。
function setcolor(forecolor, backcolor) { target = document.getelementbyid("page"); if (target != null) { target.style.backgroundcolor = document.form1.text1.value;; target.style.color = document.form1.text2.value; }}
在setcolor函数中调用document.getelementbyid方法，可以从被设定为body标签的id中获取body标签的element。如果取得了element（target！= null），就可以将element的style属性的background属性和color属性设置为文本框的值。
运行结果
执行html文件。将显示如下所示的效果。
在文本框中输入颜色编码，然后点击“button”按钮，就会显示如下所示的效果
输入其他颜色的编码，然后单击button按钮，页面将变为其他颜色
我们下面接着来看下一个示例
代码如下
javascriptchangecssparameter.html
<!doctype html><html><head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function onload() { param = getquerystring(); target = document.getelementbyid("page"); if (param != null) { if (param["bgcolor"] != null) { target.style.backgroundcolor = "#" + param["bgcolor"]; } if (param["fgcolor"] != null) { target.style.color="#"+ param["fgcolor"]; } } } function getquerystring() { if (1 < document.location.search.length) { // 获取不包括第一个字符的字符串（？符号） var query = document.location.search.substring(1); // 使用查询分隔符（＆）将字符串拆分为数组 var parameters = query.split('&'); var result = new object(); for (var i = 0; i < parameters.length; i++) { // 拆分为参数名称和参数值 var element = parameters[i].split('='); var paramname = decodeuricomponent(element[0]); var paramvalue = decodeuricomponent(element[1]); // 将参数添加到参数作为关联数组，参数名称为键 result[paramname] = decodeuricomponent(paramvalue); } return result; } return null; } </script></head><body id="page"> <div>这是一个测试页面</div> <div>啦啦啦啦</div> <div>哈哈哈哈</div></body></html>
说明：
它类似于以前的html文件，但从html文件的参数中获取颜色代码并更改前景色和背景色
运行结果：
执行html文件，将显示如下所示的效果。
更改网址，通过在url后面添加“？bgcolor = c0c0c0”来访问它。将显示如下所示的效果。背景颜色已更改为参数的颜色代码集。
下面是“?bgcolor=202020&fgcolor=00c000”的结果。前景色也改变了。
以上就是本篇文章的全部内容了，更多相关精彩内容的学习可以移步到的javascript视频教程栏目！！！！
以上就是javascript如何动态更改css页面样式的详细内容。