JavaScript如何动态更改CSS页面样式?如果要在JavaScript中更改页面样式,需要更改元素的样式属性,下面我们就来看看具体的实现内容。

我们来直接看示例
代码如下
JavaScriptChangeCssTextBox.html
立即学习“Java免费学习笔记(深入)”;
说明:
单击表单上的按钮执行用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按钮,页面将变为其他颜色
大小仅1兆左右 ,足够轻便的商城系统; 易部署,上传空间即可用,安全,稳定; 容易操作,登陆后台就可设置装饰网站; 并且使用异步技术处理网站数据,表现更具美感。 前台呈现页面,兼容主流浏览器,DIV+CSS页面设计; 如果您有一定的网页设计基础,还可以进行简易的样式修改,二次开发, 发布新样式,调整网站结构,只需修改css目录中的css.css文件即可。 商城网站完全独立,网站源码随时可供您下载
我们下面接着来看下一个示例
代码如下
JavaScriptChangeCssParameter.html
这是一个测试页面啦啦啦啦哈哈哈哈
说明:
它类似于以前的HTML文件,但从HTML文件的参数中获取颜色代码并更改前景色和背景色
运行结果:
执行HTML文件,将显示如下所示的效果。

更改网址,通过在URL后面添加“?Bgcolor = C0C0C0”来访问它。将显示如下所示的效果。背景颜色已更改为参数的颜色代码集。

下面是“?bgcolor=202020&fgcolor=00C000”的结果。前景色也改变了。

以上就是本篇文章的全部内容了,更多相关精彩内容的学习可以移步到php中文网的JavaScript视频教程栏目!!!!










