css 获取

CSS是一种用于控制网页样式的语言，可以通过CSS来定义网页的布局、颜色、字体等各种样式效果。在开发网页时，我们经常需要通过JavaScript来获取和操作CSS样式。本文将详细介绍如何使用JavaScript来获取CSS样式。

一、基本概念

在开始之前，我们先来了解一些与CSS获取相关的基本概念。

1.1 元素节点

在HTML中，每个标签都是一个元素节点，可以通过JavaScript来获取和操作。

<div id="myDiv">Hello, World!</div>

上述代码中的<div>标签就是一个元素节点。

1.2 样式对象

每个元素节点都有一个样式对象，表示该节点的CSS样式。我们可以通过JavaScript来获取和修改这个样式对象。

1.3 getComputedStyle()方法

getComputedStyle()是JavaScript的一个内置方法，用于获取计算后的CSS样式。

1.4 style属性

每个元素节点都有一个style属性，可以用来获取和修改该节点的行内样式。

二、获取元素节点的样式

在JavaScript中，可以通过多种方式来获取元素节点的样式。

2.1 使用style属性

let myDiv = document.getElementById('myDiv');
let backgroundColor = myDiv.style.backgroundColor;
console.log(backgroundColor);

上述代码中，getElementById()方法用于获取具有指定ID的元素节点，然后通过style属性获取该节点的backgroundColor样式。

2.2 使用currentStyle属性（仅适用于IE浏览器）

let myDiv = document.getElementById('myDiv');
let backgroundColor = myDiv.currentStyle.backgroundColor;
console.log(backgroundColor);

上述代码中，currentStyle属性是IE浏览器特有的属性，用于获取元素节点的当前样式。

2.3 使用getComputedStyle()方法

let myDiv = document.getElementById('myDiv');
let computedStyle = window.getComputedStyle(myDiv);
let backgroundColor = computedStyle.backgroundColor;
console.log(backgroundColor);

上述代码中，getComputedStyle()方法用于获取计算后的CSS样式，返回一个样式对象，然后通过该对象获取指定样式。

三、获取特定样式的值

除了获取整个样式对象外，我们还可以通过特定的样式属性来获取对应的值。

3.1 获取宽度和高度

let myDiv = document.getElementById('myDiv');
let width = myDiv.offsetWidth; // 获取元素的宽度，包括边框和滚动条
let height = myDiv.offsetHeight; // 获取元素的高度，包括边框和滚动条
let clientWidth = myDiv.clientWidth; // 获取元素的宽度，不包括边框和滚动条
let clientHeight = myDiv.clientHeight; // 获取元素的高度，不包括边框和滚动条
console.log(width);
console.log(height);
console.log(clientWidth);
console.log(clientHeight);

3.2 获取边框宽度

let myDiv = document.getElementById('myDiv');
let borderWidth = myDiv.clientLeft; // 获取元素左边框宽度
let borderTopWidth = myDiv.clientTop; // 获取元素上边框宽度
console.log(borderWidth);
console.log(borderTopWidth);

3.3 获取字体样式

let myDiv = document.getElementById('myDiv');
let fontFamily = window.getComputedStyle(myDiv).fontFamily; // 获取字体样式
let fontSize = window.getComputedStyle(myDiv).fontSize; // 获取字体大小
console.log(fontFamily);
console.log(fontSize);

3.4 获取颜色值

let myDiv = document.getElementById('myDiv');
let color = window.getComputedStyle(myDiv).color; // 获取字体颜色
let backgroundColor = window.getComputedStyle(myDiv).backgroundColor; // 获取背景颜色
console.log(color);
console.log(backgroundColor);

3.5 获取位置属性

let myDiv = document.getElementById('myDiv');
let offsetLeft = myDiv.offsetLeft; // 获取元素相对于父元素的左偏移量
let offsetTop = myDiv.offsetTop; // 获取元素相对于父元素的上偏移量
console.log(offsetLeft);
console.log(offsetTop);

3.6 获取滚动条位置

let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; // 获取横向滚动条位置
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取纵向滚动条位置
console.log(scrollLeft);
console.log(scrollTop);

四、总结

通过本文的介绍，我们了解到了如何使用JavaScript来获取CSS样式。我们可以使用style属性、currentStyle属性（仅适用于IE浏览器）或getComputedStyle()方法来获取元素节点的样式。我们还可以通过特定的样式属性来获取对应的值，例如获取宽度、高度、边框宽度、字体样式、颜色值、位置属性等。在实际开发中，我们可以根据需要灵活运用这些方法来获取和操作CSS样式，从而实现更加丰富多样的网页效果。