关键词

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属性值就是计算后的“像素”为单位的值。

本文链接:http://task.lmcjl.com/news/11839.html

展开阅读全文