記事のディレクトリ
A、CSSスタイル3
前のDOM操作CSSのインラインスタイル、これは（内部および外部スタイルスタイルは、スタイルシートと呼ばれる）書き込みDOMのCSSスタイルシートを読んで、スタイルシートを変更しないように注意してください
二つは、DOMは、CSSスタイルシートを読み込みます
2.1属性は、IEをサポート
currentStyleプロパティ
- 構文：要素.currentStyleスタイル名
- 役割：スタイルは、現在表示されている要素を取得します
例えば：
alert(box1.currentStyle.width);
2.2サポートしている他のブラウザ（IE8以下サポートされていない）方法
getComputedStyle()方法
- パラメータ1：スタイルの要素を取得する必要があります
- パラメータ2：一般的にヌルを渡し、擬似要素を通過
- これは、現在のスタイル要素をカプセル化するオブジェクトを返します。
役割：ウィンドウ法は、現在のスタイル要素を取得するために、直接使用することができます
例えば：
alert(getComputedStyle(box1,null).width);
ヒント：いわゆるサポートしてサポートしていませんが、ブラウザの該当するプロパティとメソッドがありません
2.3決意ブラウザの互換性の問題
アプローチ：プロパティとメソッドの上記組み合わせ
機能統合プロパティとメソッドを書きます
/**
* 定义一个函数,用来获取指定元素的当前样式
* 参数:
* - obj 要获取样式的元素
* - name 要获取的样式名
*/
function getStyle(obj,name){
if(window.getComputedStyle){
//正常浏览器的方式
return getComputedStyle(obj,null)[name];
}else{
//IE8的方式
return obj.currentStyle[name];
}
}
変数（getComputedStyle）と属性（window.getComputedStyleが）の違い：
- 変数：スコープ内で検索する必要性が、見つかったエラーが無いです
- プロパティ：リターンが見つかりません未定義
完全な例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<script type="text/javascript">
window.onload = function(){
//点击按钮以后读取box1的样式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//调用下面函数
var w = getStyle(box1,"width");
alert(w);
}
}
/**
* 定义一个函数,用来获取指定元素的当前样式
* 参数:
* - obj 要获取样式的元素
* - name 要获取的样式名
*/
function getStyle(obj,name){
//没有加window是一个变量，需要在作用域寻找
//变量没有找到报错，属性没有找到返回undefined
if(window.getComputedStyle){
//正常浏览器的方式
return getComputedStyle(obj,null)[name];
}else{
//IE8的方式
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<br/><br/>
<div id="box1"></div>
</body>
</html>
BOX1のスタイルを取得するためのボタンボタン
