javascript - 更改相对于旧行高值的行高属性

Question

是否有任何解决方案可以改变 line-height 相对于 line-height 的旧值并减少或增加它？

(我的目标是在 android 的 webView 中增加或减少行高，但我知道我可以用一些 css 或 javascript 做到这一点，所以问题标签是 javascript 和 css。)

Answer 1

嗯，是的。

// Get a reference to the element to be changed
var theP = document.querySelector("p");

// Set up a click event handler for the button
document.querySelector("button").addEventListener("click", function(){

  // Get the numeric portion of the current line-height property
  var h = parseInt(window.getComputedStyle(theP, null).lineHeight);
  
  // Set the new value to twice the old value and add the unit back on to the string
  theP.style.lineHeight = (h * 2) + "px";
});

p { line-height:10px; }

<button>Double the line height</button>
<p>The quick brown fox jumped over the lazy dog.<br>But, when he did, the dog bit his tail</p>