JavaScript style对象与CurrentStyle对象案例详解

让我们来讲解一下“JavaScript style对象与CurrentStyle对象案例详解”的完整攻略。

什么是style对象？

在前端开发中，style对象是经常用到的一个对象。我们可以使用style对象来获取或修改指定元素的样式属性。通过style对象，我们可以直接通过JavaScript代码来修改网页的样式效果，而无需通过css文件修改。

如何获取style对象？

我们可以使用element.style来获取指定元素的style对象。

比如下面这个例子，我们可以获取按钮元素的style对象：

var btn = document.querySelector('#btn');
var btnStyle = btn.style; // 获取按钮的style对象

style对象的属性值和单位

style对象的属性值一般都是字符串类型。当我们要设置表示数值类型的属性时，需要在属性值的最后加上对应的单位。

比如，我们要设置一个元素的左边距为20像素，可以这样写：

var box = document.querySelector('.box');
box.style.marginLeft = '20px';

在这个例子中，我们通过获取box元素的style对象，然后设置marginLeft属性为‘20px’，就把box元素的左边距设置为了20像素。

如何获取元素的CurrentStyle对象？

在IE浏览器中，我们可以使用element.currentStyle来获取指定元素的CurrentStyle对象。CurrentStyle对象包含了元素通过默认浏览器样式表计算出来的样式属性值，以计算后的“像素”为单位。如果元素的样式属性值在CSS文件中被改变了，CurrentStyle对象不会反映这些改变。

比如下面这个例子，我们可以获取按钮元素的CurrentStyle对象：

var btn = document.querySelector('#btn');
var btnCurrentStyle = btn.currentStyle; // 获取按钮的CurrentStyle对象

CurrentStyle对象的属性值和单位

CurrentStyle对象中的属性值一般都是字符串类型，一般默认情况下单位是“px”。比如下面这个例子：

<div id="box" style="width: 200px; margin-left: 20px;">这是一个盒子</div>

var box = document.querySelector('#box');
var boxCurrentStyle = box.currentStyle;
console.log(boxCurrentStyle.width); // 输出200px
console.log(boxCurrentStyle.marginLeft); // 输出20px

我们可以看到，在这个例子中，获取到的box元素的width属性和marginLeft属性值都是带有“px”单位的字符串形式。

示例1：使用JavaScript修改元素样式

我们可以通过JavaScript代码来动态修改元素的样式。比如下面这个例子：

<button id="btn" onclick="changeColor()">点击我改变颜色</button>

.btn-red {
  background-color: red;
  color: #fff;
}

function changeColor() {
  var btn = document.querySelector('#btn');
  btn.style.backgroundColor = 'red'; // 修改按钮背景色
  btn.style.color = '#fff'; // 修改按钮字体颜色
}

当我们点击按钮时，会触发changeColor()函数。在该函数中，我们通过获取按钮的style对象，然后修改backgroundColor属性和color属性来改变按钮的颜色。

示例2：在IE浏览器中获取元素的CurrentStyle对象

我们可以通过获取元素的CurrentStyle对象，来获取元素样式属性的计算后的值。比如下面这个例子：

<div id="box" style="width: 200px; margin-left: 20px;">这是一个盒子</div>

var box = document.querySelector('#box');
var boxCurrentStyle = box.currentStyle;
console.log(boxCurrentStyle.width); // 输出200px
console.log(boxCurrentStyle.marginLeft); // 输出20px

在该例子中，我们通过获取box元素的CurrentStyle对象，然后分别获取width属性值和marginLeft属性值。在IE浏览器中，当前样式表需要在计算元素样式时参与计算，因此这里的width属性和marginLeft属性值就是计算后的“像素”为单位的值。