获取任一元素的任意属性
用于跨浏览器获取元素计算样式的工具函数。它封装了现代浏览器的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。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！