获取任一元素的任意属性

用于跨浏览器获取元素计算样式的工具函数。它封装了现代浏览器的window.getComputedStyle和旧版IE的elem.currentStyle，提供了统一的样式获取接口。

代码如下：

function getStyle(elem, prop) {
    if (!elem || !prop) return null;
    
    // 统一属性名格式（支持backgroundColor和background-color）
    var cssProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
    
    var value;
    if (window.getComputedStyle) {
        value = window.getComputedStyle(elem, null).getPropertyValue(cssProp);
    } else if (elem.currentStyle) {
        // IE下需要使用驼峰格式
        var camelProp = prop.replace(/-([a-z])/g, function(g) { 
            return g[1].toUpperCase(); 
        });
        value = elem.currentStyle[camelProp];
    }
    
    return value || null;
}

// 获取数值型样式（自动转换为数字）
function getStyleNumber(elem, prop) {
    var value = getStyleEnhanced(elem, prop);
    if (!value) return 0;
    
    // 移除单位，转换为数字
    return parseFloat(value) || 0;
}

函数解析

参数：

elem: 要获取样式的dom元素
prop: 要获取的CSS属性名（字符串）

返回值：

返回指定CSS属性的计算值

使用场景

1. 获取元素尺寸

var element = document.getElementById('box');

// 获取宽度
var width = getStyle(element, 'width');
var height = getStyle(element, 'height');

// 获取位置
var left = getStyle(element, 'left');
var top = getStyle(element, 'top');

console.log(`尺寸: ${width} x ${height}, 位置: ${left}, ${top}`);

2. 动画前的状态获取

function animateElement(elem, targetProps) {
    // 获取初始状态
    var startState = {
        opacity: getStyleNumber(elem, 'opacity'),
        left: getStyleNumber(elem, 'left'),
        top: getStyleNumber(elem, 'top')
    };
    
    // 执行动画...
    console.log('初始状态:', startState);
}

3. 响应式布局判断

function isElementVisible(elem) {
    var display = getStyle(elem, 'display');
    var visibility = getStyle(elem, 'visibility');
    var opacity = getStyleNumber(elem, 'opacity');
    
    return display !== 'none' && 
           visibility !== 'hidden' && 
           opacity > 0;
}

// 检查元素是否在视窗外
function isElementOffscreen(elem) {
    var rect = elem.getBoundingClientRect();
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    
    return rect.right < 0 || 
           rect.bottom < 0 || 
           rect.left > windowWidth || 
           rect.top > windowHeight;
}

4. 样式检查和调试

function debugElementStyles(elem) {
    var styles = ['width', 'height', 'margin', 'padding', 'position', 'display'];
    var styleInfo = {};
    
    styles.forEach(function(prop) {
        styleInfo[prop] = getStyle(elem, prop);
    });
    
    console.log('元素样式:', styleInfo);
    return styleInfo;
}

// 使用
var debugInfo = debugElementStyles(document.getElementById('myElement'));

5. 动态样式计算

function calculateCenterPosition(elem) {
    var parent = elem.parentElement;
    if (!parent) return { left: 0, top: 0 };
    
    var parentWidth = getStyleNumber(parent, 'width');
    var parentHeight = getStyleNumber(parent, 'height');
    var elemWidth = getStyleNumber(elem, 'width');
    var elemHeight = getStyleNumber(elem, 'height');
    
    return {
        left: (parentWidth - elemWidth) / 2 + 'px',
        top: (parentHeight - elemHeight) / 2 + 'px'
    };
}

// 居中元素
function centerElement(elem) {
    var position = calculateCenterPosition(elem);
    elem.style.left = position.left;
    elem.style.top = position.top;
}

现代替代方案

对于现代项目：

直接使用window.getComputedStyle() - 现代浏览器已广泛支持
CSSStyleDeclaration.getPropertyValue() - 更标准的属性获取方式
ResizeObserver - 监听尺寸变化
Intersection Observer api - 监听元素可见性

这个getStyle函数在需要兼容旧浏览器或作为工具函数时仍然很有价值，但在现代项目中可以直接使用原生API。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/course/34_2154