javaｓｃｒｉｐｔ允许你即时改变CSS样式，这将吸引用户的目光，使你想把他们的注意力集中起来，并提供更好的互动体验。

Javaｓｃｒｉｐｔ中有4种修改CSS的方法：

修改节点样式（内联样式）；

更改节点类或id；

写一个新的CSS；

在页面替换样式表。

人们不推荐使用这两种方法，几乎所有的功能都可以通过前两种方式实现，而且代码更清晰易懂。

下面还将讨论如何在表单中获得元素和注释的真正样式。

1。修改节点样式（内联样式）

这种方法的权重最高，直接写在节点的样式属性上，他将用其他方法覆盖样式集，使用方法非常简单：




VaR元= document.getelementbyid（测试）；
element.style.display = 没有 / /使隐藏元素



但需要注意的是，一些CSS样式名称由几个单词组成，如字体大小、背景图像等，它们都是通过破折号连接的。然而，在Javaｓｃｒｉｐｔ中的破折号表示会减少，所以他们不能作为属性名称。我们需要使用驼峰格式（camelCase）写的属性名称，如字体大小、背景。

它也注意到，许多单位的风格是重要的，不能只给一个数。例如，单位是像素字体，EM、%（百分比），等。

这种方法违背了绩效与行为分离的原则，一般只适合即时定义的样式元素经常改变（及相关），如一滴可以用div，顶部、左拖放，他的财产是不断变化的，你不能使用类或定义，使用这种方式可以立即修改样式，并重写设置的其他方式。

2。更改类，id

ID和类是钩子的样式，浏览器将自动更新元素的样式。



更改ID的方式类似于类，但不建议个人使用它，因为id用于定位元素。最好不要使用它来定义元素的显示样式，ID也常常被用作Javaｓｃｒｉｐｔ的钩子，这可能会导致不必要的错误。

在Javaｓｃｒｉｐｔ，类是一个保留关键字，所以使用类名作为访问元素的类的一个属性，例如：




红色{。
颜色：红色；
}
廉价小说{。
背景：黄色；
}
element.classname =红色； / /集类
element.classname =廉价小说； / /班



但不幸的是，这个属性是一个字符串，包含类的所有元素，类全部由空格分隔，所以在删除类时不方便（增加到一个连接字符串之间可以，但是记住添加一个前空格~）。

我不得不使用正则表达式删除时，删除根据类的字符串中的不同位置（头、尾、中间），但它是一个更好的方式思考，是ClassName属性最后一个空间，然后一路到中间，直接替换子串：




删除类
功能removeClass（元，classromove）{
VaR的类名称= +元。类名+ ；
类名称=类名。取代（+ classromove +
/ / string.trim（类名）；
element.classname =类名；
}



一般样式修改是用这种方式定义CSS样式的最好方法。Javaｓｃｒｉｐｔ只发送模式更改指令，具体样式定义交给CSS。

最后两种方法，不雅，也有一定的兼容性问题，我不介绍了~

三.获得真正的风格

首先，它是明确的，它是不可能得到通过element.style，那他只能得到内联样式，并在样式表中定义的不可得到。

由于元素的风格可以在如此多的地方定义，所以很难说出他的真正风格是什么样子。在浏览器中显示真实风格的方法是什么

事实上，微软和W3C都提供了相应的方法，我们只需要执行一个包即可使用：




获取样式元素
功能getrealstyle（元素、风格）{
无功realstyle = null；
如果（元。currentstyle）{
realstyle =元。currentstyle {为}； / / IE
} else if（窗口。getcomputedstyle）{
realstyle = window.getcomputedstyle（元，null）{为}； / / W3C
}
返回realstyle；
}



记住，来为在驼峰格式~ ~

4。表单的显示和隐藏（不要滥用CSS）

我们经常看到一些形式的选择是动态添加的，例如，如果你选择一个婚姻形式的形式结婚，那么你将有一个输入框输入您的配偶的名字。



如果没有选择，当然配偶的形式是隐藏的，但此时，CSS不应该用来解决它，即样式。



因为不管你是隐藏还是不隐藏它，输入框都是存在的，不上升，{ }直截了当地说，虽然隐藏，但他仍然存在于DOM中，如果用户提交表单到隐藏输入框中，提交的内容可能会出现一些意想不到的错误。



做正确的事是把这个内容到DOM的超空间，不会有问题的。

以上是本文的全部内容，希望大家能喜欢。