JavaScript如何动态更改CSS页面样式

JavascriptChangeCssTextBox.html

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; } }

说明：

单击表单上的按钮执行用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

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 这是一个测试页面