JavaScript动态更改CSS页面样式的方法-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

JavaScript动态更改CSS页面样式的方法-创新互联

小编给大家分享一下JavaScript动态更改CSS页面样式的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

创新互联建站是一家集网站建设,青云谱企业网站建设,青云谱品牌网站建设,网站定制,青云谱网站建设报价,网络营销,网络优化,青云谱网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

JavaScript如何动态更改CSS页面样式?如果要在JavaScript中更改页面样式,需要更改元素的样式属性。

JavaScript动态更改CSS页面样式的方法

我们来直接看示例


代码如下

JavaScriptChangeCssTextBox.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文件。将显示如下所示的效果。

JavaScript动态更改CSS页面样式的方法

在文本框中输入颜色编码,然后点击“button”按钮,就会显示如下所示的效果

JavaScript动态更改CSS页面样式的方法

输入其他颜色的编码,然后单击button按钮,页面将变为其他颜色

我们下面接着来看下一个示例


代码如下

JavaScriptChangeCssParameter.html




  
  
      


  
这是一个测试页面
啦啦啦啦
哈哈哈哈

说明:

它类似于以前的HTML文件,但从HTML文件的参数中获取颜色代码并更改前景色和背景色

运行结果:

执行HTML文件,将显示如下所示的效果。

JavaScript动态更改CSS页面样式的方法


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

JavaScript动态更改CSS页面样式的方法

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

JavaScript动态更改CSS页面样式的方法

看完了这篇文章,相信你对JavaScript动态更改CSS页面样式的方法有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章名称:JavaScript动态更改CSS页面样式的方法-创新互联
URL分享:http://kswsj.cn/article/cejjdp.html

其他资讯