Question

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

我试试：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

因此对于font-size你可以这样做：

window.getComputedStyle(element, pseudo-element or null).getPropertyValue('font-size');

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用tagName检查它是否为div。

function GetFont() {
  var a = window.getSelection().anchorNode.parentElement;
  var font;
  if (a.tagName == 'DIV') {
    font = '0px';
  } else {
    font = a.style.fontSize;
  }
  return font;
}

Answer 3

经过这么多尝试，我得到了它：

＆＃13;

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 font = '0px';
  var tagName = window.getSelection().anchorNode.parentElement.tagName;
  if (tagName == 'FONT') {
    tagName = window.getSelection().anchorNode.parentElement;
    font = $(tagName).css('font-size');
  }
  return font;
}

＆＃13;

<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>

＆＃13;

如何检查父元素是div还是字体并返回fontsize？

3 个答案: