JavaScript修改CSS样式的四种方式及注意事项

JavaScript修改CSS样式的四种方式

JavaScript支持即时修改CSS样式，从而引导用户关注重点区域，提升交互体验。

JavaScript修改CSS主要有4种实现方式：

一是修改节点style属性（内联样式）；二是改变节点的class或id；三是动态写入新的CSS规则；四是替换页面中的样式表。

个人不推荐后两种方法，因为前两种方式足以实现绝大多数功能，且代码逻辑更清晰、易于理解。

下文还将介绍如何获取元素的真实样式，以及处理表单显示隐藏时的注意事项。

修改节点style（内联样式）

1、修改节点style（内联样式）

此方法优先级最高，直接写入节点的style属性，会覆盖其他来源的样式。使用方法如下：

var element = document.getElementById("test");
element.style.display = "none" //让元素隐藏

需注意，部分CSS属性名包含连字符（如font-size、background-image），在JavaScript中连字符代表减法，不能直接作为属性名。应使用驼峰命名法（camelCase），例如fontSize、backgroundImage。

此外，许多样式属性带有单位，不能仅赋值数字。例如fontSize的单位可以是px、em或%（百分比）。

这种方式违背了表现与行为分离的原则，通常仅适用于定义随交互频繁变化的即时样式（如拖拽div时动态变化的top、left属性）。此时使用class等方式难以实现，而内联样式可即时生效并覆盖其他设置。

更改class与id属性

2、更改class、id

id和class是设置样式的“钩子”，更改后浏览器会自动更新元素样式。

更改id的方法与class类似，但个人不建议这样做。因为id主要用于定位元素，不宜用于定义显示样式，且id常作为JavaScript的钩子，混用可能引发错误。在JavaScript中，class是保留关键字，因此使用className属性访问元素的class，例如：

.redColor{
 color: red;
}
.yellowBack{
 background: yellow;
}
element.className = "redColor";//设置class
element.className += " yellowBack";//增加class

但该属性是一个包含元素所有class的字符串，各class以空格分隔，删除class时较为不便（增加则只需字符串拼接，注意前加空格）。

此前我使用正则表达式根据class在字符串中的位置（头部、尾部、中间）进行删除，后来发现更优方案：在className属性头尾各加一个空格，使所有class均处于“中间”状态，直接进行子串替换即可：

//删除class
function removeClass(element,classRomove){
var classNames = " "+element.className+" ";
classNames = classNames .replace(" "+classRomove+" ", " ");
//String.trim(classNames);
element.className = classNames;
}

常规样式修改最好采用此方法，预先定义好CSS样式，JavaScript仅发出切换指令，具体样式由CSS负责。

后两种方法既不够优雅，也存在兼容性问题，此处不再赘述。

获取元素真实样式

3、获取真实样式

首先明确，通过element.style无法获取样式，它只能读取内联样式，无法获取样式表中的定义。由于样式可定义在多处，元素的实际显示效果难以直接判断。如何获取元素在浏览器中渲染的真实样式？微软和W3C均提供了相应方法，只需封装即可使用：

//获取元素样式
function getRealStyle(element,styleName){
var realStyle = null;
if(element.currentStyle){
realStyle = element.currentStyle[styleName];//IE
}else if(window.getComputedStyle){
realStyle=window.getComputedStyle(element,null)[styleName];//W3C
}
return realStyle;
}

注意传入的styleName需采用驼峰格式。

表单显示隐藏的注意事项

4、表单的显示和隐藏（避免滥用CSS）

常遇到表单选项动态添加的场景，例如选择“已婚”后，需额外输入配偶姓名。

若未选择，则需隐藏“配偶”相关表单。此时不应使用CSS解决，即避免使用style.display=”none”来隐藏。

无论是否隐藏，输入框始终存在于DOM中而不增不减。简而言之，隐藏后元素仍存在于DOM里，若此时用户提交表单，会一并提交该隐藏输入框的内容，可能导致意想不到的错误。

正确做法是将该内容从DOM中移除（放入“超空间”），从而避免上述问题。

以上即为本文全部内容，希望能对您有所帮助。