js改变css样式

 

CreateTime--2017年10月31日15:14:12

Author:Marydon

js改变css样式

1.js改变单个css样式

　　HTML部分

<div id="test" style="display:none">测试js改变单个css样式</div>

　　JAVASCRIPT部分

document.getElementById('test').style.display = 'none';

2.js改变多个css样式

　　HTML部分

<div id="test">测试js改变多个css样式</div>

　　方法一：通过操作style属性实现

$get("test").style.height = '100px';
$get("test").style.width = '100px';
$get("test").style.border = '1px solid red';

　　方法二：通过cssText属性实现（推荐使用）

$get("test").style.cssText = "height:100px;width:500px;border:1px solid red;";

　　说明：需要通过js改变多个css样式时，推荐使用第二种方式

　　注意：使用cssText有2个注意事项

　　a.会覆盖之前的样式；

　　举例：

<div id="test" style="height:100px;width:500px;border:1px solid red;">测试cssText</div>

　　效果：想在此基础上加个背景色

$get("test").style.cssText = "background-color:yellow;"　　

　　结果：但是实现效果却是加上了背景色，其他样式被覆盖掉了

　　b.ie8及ie8以下结尾没有分号。

　　通过cssText属性给标签设置行内样式时， ie8及ie8以下浏览器会自动去掉样式中的最后一个封号

　　解决方案：使用cssText时应该采用叠加的方式以保留原有的样式　　

var cssText = $get("test").style.cssText;
// 不以;号结尾
if(cssText.lastIndexOf(';') != cssText.length - 1) {
    cssText += ";"
}
cssText += "background-color:yellow;color:green;";
// 追加多个样式
$get("test").style.cssText = cssText; 

小结：

　　使用js改变单个css样式，通过调用style属性来实现；

　　使用js改变多个css样式，通过调用cssText属性来实现，注意避免bug的出现。

3.js改变名称带有-的样式

　　使用javascript操作CSS样式时，遇到样式名称中带有-的，第二个首字母大写即可　　

$get("test").style.backgroundColor = "yellow";