Если родительским элементом является font, я пытаюсь вернуть его размер шрифта, но мне не удается проверить, является ли это шрифт или 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>
1
Shree 28 Авг 2017 в 08:04

3 ответа

Лучший ответ

После стольких попыток я получил это:

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;
}
<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>
0
Peter Mortensen 16 Дек 2018 в 11:36

Вы можете использовать window.getComputedStyle. Этот метод дает значения всех свойств CSS элемента после применения активных таблиц стилей и разрешения любых базовых вычислений, которые могут содержать эти значения.

Так что для font-size вы можете сделать:

window.getComputedStyle(element, pseudo-element or 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>
1
Ofisora 28 Авг 2017 в 05:34

Вы можете использовать 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;
}
0
vher2 28 Авг 2017 в 05:32