I have a function that change lineHeight of body (I need to change line height of all elements):

if (document.body.style.lineHeight == "")
{ 
    document.body.style.lineHeight = "1.0em";
}
document.body.style.lineHeight = parseFloat(document.body.style.lineHeight) + (0.4) + "em";

If the document hasn't any line-height in it's css this code works perfectly and all line height of elements will be increased, BUT there is strange behavior in some case:

1. the document.body.style.lineHeight == "" is always true even if the body in css has line-height!!!

2. if any of the elements has line-height in CSS this code will fail to change line height. i can get document.body.style.lineHeight value and i can see that it increase BUT nothing change in document! (no visual effect)

any help would be appreciated.

I have a function that change lineHeight of body (I need to change line height of all elements):

if (document.body.style.lineHeight == "")
{ 
    document.body.style.lineHeight = "1.0em";
}
document.body.style.lineHeight = parseFloat(document.body.style.lineHeight) + (0.4) + "em";

If the document hasn't any line-height in it's css this code works perfectly and all line height of elements will be increased, BUT there is strange behavior in some case:

1. the document.body.style.lineHeight == "" is always true even if the body in css has line-height!!!

2. if any of the elements has line-height in CSS this code will fail to change line height. i can get document.body.style.lineHeight value and i can see that it increase BUT nothing change in document! (no visual effect)

any help would be appreciated.

• javascript
• html
• css

• 3 Point 1: the element.style object reads directly from the element's style attribute, so it is unaware of styles set in CSS. To read those, you need getComputedStyle - developer.mozilla/en-US/docs/Web/API/Window/… – Mitya Commented May 7, 2015 at 10:05
• 1 if the body in css you mean in css-file, or in style attribute? – Grundy Commented May 7, 2015 at 10:05
• @Grundy, the css file – mehdok Commented May 7, 2015 at 10:06
• 1 as for second question: nested elements which has line-height in CSS ignore body.style.lineHeight because it have a more specific selector, so it override inherited value from body style – Grundy Commented May 7, 2015 at 10:23
• 1 You set it as you currently are - it's just your reading mechanism that's erroneous. – Mitya Commented May 7, 2015 at 10:45

2 Answers 2

As already mentioned in the ments, you need window.getComputedStyle() (or just getComputedStyle()) to retrieve the actually applied style of an element, because element.style will only return the contents of the HTML style attribute.

Note however, that will not be the literal value you assigned it (like 1.5em), but the equivalent in pixels (1em = 16px by the way). The returned value will also not be a number, but a string containing the suffix px.

Also note that the default value will not be "", but "normal".
But it could also be "initial" or "inherit", so instead of checking its actual value, I suggest just checking whether the string ends in px.

So your code should probably look like:

var style = getComputedStyle(document.body);
if (style.lineHeight.match(/px$/) === null)
{ 
    document.body.style.lineHeight = "1.0em";
}
else
{
    document.body.style.lineHeight = (parseFloat(style.lineHeight) / 16) + (0.4) + "em";
}

Also: Fiddle.

And last, note that if you specify a percentage as line height, there is no way to retrieve that value (other than parsing $('style').innerHTML yourself of course), you will only get the pixel equivalent at the time your function runs.

As for your question how to apply the line height to all elements, simply inject a <style> tag in head, containing CSS like:

*
{
    line-height: 1.0em !important;
}

So the snippet above would look something like this:

var tag = document.createElement('style');
var style = getComputedStyle(document.body);
if (style.lineHeight.match(/px$/) === null)
{
    tag.innerHTML = '* { line-height: 1.0em !important; }';
}
else
{
    tag.innerHTML = '* { line-height: ' + (parseFloat(style.lineHeight) / 16 + 0.4) + 'em !important; }';
}
document.head.appendChild(tag);

Of course this will not work if there are more specific selectors with !important already, but otherwise it will even override inline style attributes.

See updated fiddle.

If you are creating a program which accepts user input as the line height, and then implements it onto the text area/placeholder on clicking a button, you can try this:

HTML:

<input id = "lspace" placeholder = "Line Spacing">
</input>

<button id = "aplspace" onclick = "aplspace()"> Apply Line Spacing 
</button>

<textarea id = "tarea"> Your Text 
</textarea>

CSS:

#lspace {
  height: 30px;
  width: 150px;
  font-size: 18px;
  border-radius: 5px;
  font-family: Arial;
  border: none;
  padding-left: 15px;
  margin-right: 5px;
}

#aplspace {
  height: 30px;
  width: 180px;
  font-size: 18px;
  border-radius: 5px;
  background-color: rgb(255, 191, 0);
  color: black;
  font-family: Arial;
  transition: 0.2s ease-in-out;
  border: none;
  margin-right: 5px;
}

#tarea {
  height: 400px;
  width: 1415px;
}

JS:

function aplspace() {
  var lspace = document.getElementById("lspace").value;
  lspace = Number(lspace);
  document.getElementById("tarea").style.lineHeight = lspace + "px";
}