<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>脚本化css</title>
<link rel="stylesheet" href="css/cssJavasript.css" />
<style type="text/css">
.current{
background-color: #0ff;
}
</style>
</head>
<body>
<div id="cssJs">0000000</div>
<script type="text/javascript">
var cssJs = document.getElementById("cssJs");
/*脚本化内联样式
更改单独的文档元素的style属性，style属性值不是字符串而是一个CSSStyleDeclaration对象
* style对象的js属性代表html代码中通过style指定的css属性
* 注意：要是css属性名包含多个连字符时，应格式移除连字符并将每个连字符后面紧接着的字符大写
* 如：CSSStyleDeclaration.style.fontFamily = "sans-serif"*/
cssJs.style.width = "200px";
cssJs.style.height = "200px";
cssJs.style.border = "1px solid #ccc";
/**查询计算出样式 ff:getComputedStyle() ie:currentStyle
* 用浏览器窗口对象的getComputedStyle()方法获得一个元素的计算样式
* getComputedStyle(要获取计算样式的元素, null或者空字符如：":before,:after...")
* 返回值是代表应用在指定元素上的所有样式*/
console.log(getComputedStyle(cssJs, ""));
grabAttention(cssJs);
/*
脚本化css类 className()
* 好处：能在痛一时刻改变多个css属性
* 缺点：只能设计一个类名，并会覆盖已存在的类
* 不过HTML5解决了这个问题，可以使用classList设计多个类属性，需要注意的是，不是所有的浏览器都支持这个属性*/
function grabAttention(e){//设计元素属性
e.className = "current";
}
function releaseAttention(e){//清除元素属性
e.className = "";
}
/*
脚本化样式表
* 两类使用对象
* 第一类 元素对象由<style>和<link>元素表示，一个包含一个是引用
* 第二类 CSSStyleSheet对象表示样式表本身
*
* 使用disabled属性设置类true样式表就被浏览器关闭并忽略*/</script>
</body>
</html>
