如何在 JavaScript 中获取 DOM 元素的计算字体大小？

如何在 JavaScript 中检索计算的字体大小

确定 DOM 元素的实际字体大小在各种场景中至关重要，例如自定义文本编辑器或设计响应式网页布局。这不仅需要考虑元素的显式样式，还要考虑继承的值和浏览器级设置。

解决方案

要获取计算的字体大小，您可以利用两种方法：

1。浏览器特定方法： currentStyle

对于 Internet Explorer，您可以使用非标准 currentStyle 属性：

element.currentStyle['fontSize']

请注意，属性名称包含连字符，例如 font-size、必须以驼峰式命名法（例如，fontSize）访问 currentStyle。

2.标准方法：getCompulatedStyle

对于所有其他浏览器和跨浏览器兼容性，您可以使用 DOM Level 2 标准 getCompulatedStyle 方法：

document.defaultView.getComputedStyle(element, null).getPropertyValue('fontSize')

实现示例

定义一个实用函数来获取style:

function getStyle(element, styleProp) {
  var camelize = function (str) {
    return str.replace(/\-(\w)/g, function(str, letter){
      return letter.toUpperCase();
    });
  };
  
  if (element.currentStyle) {
    return element.currentStyle[camelize(styleProp)];
  } else if (document.defaultView && document.defaultView.getComputedStyle) {
    return document.defaultView.getComputedStyle(element,null)
                               .getPropertyValue(styleProp);
  } else {
    return element.style[camelize(styleProp)]; 
  }
}

用法:

var element = document.getElementById('elementId');
getStyle(element, 'font-size');

其他提示

• 在访问 getCompulatedStyle 之前检查 document.defaultView 是否存在。
• 如果 currentStyle 和 getCompulatedStyle 都不可用，请使用element.style 检索内联 CSS 属性。

以上是如何在 JavaScript 中获取 DOM 元素的计算字体大小？的详细内容。更多信息请关注PHP中文网其他相关文章！