十四、Javascript和CSS

1、大部分HTML元素都有一个style属性，利用style来取得或改变CSS样式

(1) 用style的CSS属性

对于使用-号的CSS属性，要将其转换为驼峰大小写形式，如background-color改为backgroundColor
例：

  var x = document.getElementById("myDiv");
  x.style.backgroundColor = "#cfc";  // 背景颜色
  x.style.color = "#099";  // 文字颜色
  x.style.fontSize = "36pt";  // 文字大小
  x.style.cssText = "width: 500px; color: #0c0; background-color: #ff9";

(2) 用style的cssText属性

写入cssText属性后，可以直接在值内填入css的原写法，
例：
x.style.cssText = "width: 500px; color: #0c0; background-color: #ff9";

(3) 用style的setProperty()方法

例：
x.style.setProperty("background-color", "#33cc33"); // 背景颜***r> x.style.setProperty("font-size", "40pt"); // 文字大小

(4) style的removeProperty()方法移除一个CSS属性

例：x.style.removeProperty("background-color");

(5) style的getProperty()方法取得一个CSS属性的值

例：alert(x.style.getPropertyValue("background-color"));

2、增加和去除class属性

  var x = document.getElementById("myDiv");
  x.setAttribute("class", "myClass");  // 增加class属性
  x.removeAttribute("class");  // 去除class属性

3、计算样式getComputedStyle，取得元素的所有样式

例：

  var x = document.getElementById("myDiv");
  var y = document.defaultView.getComputedStyle(x);
  alert(y.backgroundColor);   
  alert(y.fontSize);

例：

<html>
<head>
<title>javascript示例</title>
<style>
#myDiv {
  width: 450px;
  color: red;
  background: #cff;
  font-size: 36pt;
  border: 1px solid blue;
}
</style>
</head>
<body>
<div id="myDiv">Hello，World！</div>
<br>
<input type="button" value="改变样式" onclick="changeStyles()" />    
<script>
var x = document.getElementById("myDiv");
function changeStyles(){
  x.style.backgroundColor = "#ffc";  // 背景颜色
  x.style.color = "green";  // 文字颜色
  x.style.fontSize = "48pt";  // 文字大小
//  x.style.cssText = "width: 500px; color: #0c0; background-color: #ff9";
//  x.style.setProperty("background-color", "#ffc"); // 背景颜色
//  x.style.setProperty("color", "green"); // 文字颜色
//  x.style.setProperty("font-size", "48pt"); // 文字大小
}
</script>  
</body>
</html>

图片说明
点击改变样式后，变成下图：
图片说明