javascript - 如何检查父元素是div还是font并返回fontsize？

Question

如果父元素是字体，我尝试返回它的字体大小，但我无法检查返回值是字体还是 div。

我尝试:

function changeFont() {
  var font = GetFont().split('px')[0];
  var realFont = parseInt(font) + parseInt(50)
  alert(realFont);
  document.execCommand("fontSize", false, "7");
  var fontElements = document.getElementsByTagName("font");
  for (var i = 0, len = fontElements.length; i < len; ++i) {
    if (fontElements[i].size == "7") {
      fontElements[i].removeAttribute("size");
      fontElements[i].style.fontSize = realFont +"px";
    }
  }
}

function GetFont() {
  var a = window.getSelection().anchorNode.parentElement;
  alert(a);
  var font = '0px';
  // If parent is font, return font size
  // I need help to return the font size
  return font;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onclick="changeFont()" value="Change font">
<div contenteditable="true">Hello, this is some editable text</div>

Answer 1

您可以使用 window.getComputedStyle .在应用事件样式表并解析这些值可能包含的任何基本计算之后，此方法给出元素所有 CSS 属性的值。

所以对于font-size你可以这样做:

window.getComputedStyle(元素、伪元素或 null).getPropertyValue('font-size');

function changeFont() {
  var font = GetFont().split('px')[0];
  //console.log(font);
  var realFont = parseInt(font) + parseInt(50)
  alert(realFont);
  document.execCommand("fontSize", false, "7");
  var fontElements = document.getElementsByTagName("font");
  for (var i = 0, len = fontElements.length; i < len; ++i) {
    if (fontElements[i].size == "7") {
      fontElements[i].removeAttribute("size");
      fontElements[i].style.fontSize = realFont + "px";
    }
  }
}

function GetFont() {

  var a = window.getSelection().anchorNode.parentElement;

  var fontSize = window.getComputedStyle(a, null).getPropertyValue('font-size');

  alert(fontSize);
  //var font = '0px';
  // if parent is font return fontsize 
  //  need help to return fontsize
  if (a.tagName !== "FONT") {
    fontSize = '0px';
  }
  return fontSize;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onclick="changeFont()" value="Change font">
<div contenteditable="true">Hello, this is some editable text</div>