CODEWITHSUNDEEP
javascriptjquery
4b0
4b0

Reputation: 22323

How to check parent element is div or font and return fontsize?

If the parent element is font, I try to return its font size, but I am failing to check if it's a font or a div for the return value.

I try:

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>

Upvotes: 2

Views: 149

Answers (3)

4b0
4b0

Reputation: 22323

After so many attempts I got it:

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>

Upvotes: 0

Ofisora
Ofisora

Reputation: 2737

You can use window.getComputedStyle. This method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.

So for the font-size you can do:

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>

Upvotes: 1

vher2
vher2

Reputation: 990

You can use tagName to check if it is a div.

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

Upvotes: 0

Related Questions