手机版

本地js改变css样式的两种方法

时间:2021-09-05 来源:互联网 编辑:宝哥软件园 浏览:

下面我将向您介绍本机js更改CSS样式的两种方法:

1.在javascript代码中传递node.style.cssText='css表达式1;Css表达式2;Css表达式3 '直接改变CSS样式。

2.首先对CSS样式表中的“active class”等特定类进行样式化(这里的active类是假设的,暂时不存在),然后通过javascript代码中的node.classname=' active '将CSS样式表中active类的样式设置附加到这个节点上。

下面是详细的介绍,首先是html代码:

style type=' text/CSS ' div { float : left;padding: 20pxmargin: 10pxborder: 1px固体# 000;背景-color : # fff;color: # 000}.active { background-color : blue }/style body div class=' root '/div/body只是一个简单的div,运行结果是

首先,用上面提到的第一种方法改变css样式,并编写下面的javascript代码:

脚本类型=' text/JavaScript ' var root=document . getelementsbyclassname(' root ')[0];root . style . CSS text=' background-color : blue;color: # fff';/script运行的结果是:

然后使用上面提到的第二种方法来改变css样式,并编写下面的javascript代码:

脚本类型=' text/JavaScript ' var root=document . getelementsbyclassname(' root ')[0];root.className=' active/script也按如下方式运行:

总结:这两种方法的结果是一样的,但是就操作过程而言,第二种方法“node.classname”使得css和js的编写分开,显然更加合理有序。如果css语句简单,两种方法没有区别,但是如果css语句复杂,显然第二种方法是有序的。

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助,也希望多多支持我们!

版权声明:本地js改变css样式的两种方法是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。