JavaScript程序设计（十一）——Javascript和CSS
十四、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>
点击改变样式后，变成下图：
