获取JS中DOM元素的计算字体大小

  • Z时代
  • 2024-01-10
  • 分类：问答

是否可以font-size考虑到其他地方（body例如在标记中）进行的常规设置，继承的值等来检测DOM元素的计算结果？

与框架无关的方法会很好，因为我正在开发一个可以独立运行的脚本，但这当然不是必需的。

背景：我正在尝试调整CKEditor的字体选择器插件（在此处提供源），以便它始终显示当前光标位置的字体大小（而不是仅在span具有显式font-size设置的，这是当前行为中）。

回答：

您可以尝试使用非标准IE element.currentStyle属性，否则，可以查找DOM Level2标准getComputedStyle方法（如果可用）：

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

用法：

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

更多信息：

  • 获取样式（QuirksMode）

感谢 @Crescent Fresh ， @kangax 和 @Pekka 的评论。

变化：

  • 添加了camelize功能，因为包含连字符font-size（如fontSize）的属性必须作为currentStyleIE对象上的camelCase（例如：）来访问。

  • document.defaultView在访问之前检查的存在getComputedStyle。

  • 添加了最后一种情况，当el.currentStyle和getComputedStyle不可用时，可通过获得内联CSS属性element.style。

以上是 获取JS中DOM元素的计算字体大小 的全部内容， 来源链接： utcz.com/qa/433279.html

回到顶部