JavaScript style对象与CurrentStyle对象案例详解
1、Style对象 style对象代表一个单独的样式声明，可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式，即元素标签中style属性的值。 例子： <style type="text/css">#div{color:gray;}</div>//内部样式 <div id="div" style="color:red;"></div>//内联样式 document.getElementById('id').style.color;//值为red 2、currentStyle对象
### JavaScript Style 对象与 CurrentStyle 对象详解
#### 一、Style 对象
**定义**：
- `Style` 对象代表一个单独的样式声明，它可以从应用样式的文档元素访问。`Style` 对象主要用来获取元素的内联样式，即元素标签中`style`属性的值。
**例子**：
```javascript
// 内部样式
<style type="text/css">
#div {
color: gray;
}
</style>
// 内联样式
<div id="div" style="color: red;"></div>
// 获取内联样式
document.getElementById('div').style.color; // 值为 "red"
```
**解析**：
- 在上述例子中，即使在外部或内部样式表中指定了颜色为灰色，但由于内联样式具有更高的优先级，因此`document.getElementById('div').style.color` 返回的颜色值将是 "red" 而不是 "gray"。
#### 二、CurrentStyle 对象
**定义**：
- `CurrentStyle` 对象返回所有样式声明（包括内部样式、外部样式和内联样式）按照 CSS 层叠规则作用于元素的最终样式。`CurrentStyle` 对象仅在 Internet Explorer 和 Opera 浏览器中被支持。在其他现代浏览器中，推荐使用 `window.getComputedStyle()` 方法来替代。
**例子**：
```javascript
var div = document.getElementById("div");
var colorStr = null;
if (div.currentStyle) { // 兼容 IE
colorStr = div.currentStyle.color;
} else {
colorStr = window.getComputedStyle(div, null).color;
}
var col = colorStr; // 得到 div 的 color 属性值
```
**区别**：
- `window.getComputedStyle()` 是只读的，只能获取元素的样式但不能设置。而 `style` 对象既能读取也能设置元素的样式。
- 对于一个没有任何样式定义的元素，`window.getComputedStyle()` 返回的对象中的 `length` 属性通常表示样式属性的数量，而 `style` 对象中 `length` 的值为 0，表示没有内联样式。
- 不同的浏览器对 `CurrentStyle` 对象的支持存在差异，因此在实际开发中需要进行兼容性处理。
#### 三、示例：可拖动的层
假设我们有一个可拖动的层，我们需要获取其最终的样式以便实现拖拽功能。
**使用 `CurrentStyle` 对象**：
```javascript
var div = document.getElementById("draggableDiv");
var currentStyle = null;
if (div.currentStyle) { // 兼容 IE
currentStyle = div.currentStyle;
} else {
currentStyle = window.getComputedStyle(div, null);
}
var leftPos = parseInt(currentStyle.left, 10); // 获取层的左位置
var topPos = parseInt(currentStyle.top, 10); // 获取层的上位置
```
**使用 `Style` 对象**：
如果只需要获取内联样式，则可以直接使用 `style` 对象：
```javascript
var div = document.getElementById("draggableDiv");
var leftPos = parseInt(div.style.left, 10); // 获取层的左位置
var topPos = parseInt(div.style.top, 10); // 获取层的上位置
```
**总结**：
- `Style` 对象用于获取元素的内联样式。
- `CurrentStyle` 对象用于获取元素的最终样式，包括内部样式、外部样式和内联样式，并考虑了 CSS 的层叠规则。
- 在现代浏览器中推荐使用 `window.getComputedStyle()` 方法来代替 `CurrentStyle` 对象，以确保跨浏览器的兼容性和一致性。
- 在实际项目开发中，根据具体需求选择合适的对象或方法来获取元素的样式信息。
