Question

我有一个更改正文lineHeight的函数（我需要更改所有元素的行高）：

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

如果文档中没有任何line-height，则此代码可以正常运行，并且元素的所有行高都会增加，但在某些情况下会有奇怪的行为：

1）document.body.style.lineHeight == ""始终为真，即使css中的正文有line-height !!!

2）如果CSS中的任何元素都有line-height，则此代码将无法更改行高。我可以获得document.body.style.lineHeight值，我可以看到它增加但是文档中没有任何变化！（没有视觉效果）

任何帮助将不胜感激。

Answer 1

正如评论中已经提到的，您需要window.getComputedStyle()（或仅getComputedStyle()）来检索元素的实际应用样式，因为element.style只会返回HTML的内容style属性。

但请注意，这不是您为其指定的文字值（如1.5em），而是等效的（以1em = 16px为单位）。返回的值也不是数字，而是包含后缀px的字符串。

另请注意，默认值不是""，而是"normal" 但它也可以是"initial"或"inherit"，因此我建议只检查字符串是否以px结尾。

，而不是检查其实际值。

所以你的代码应该是这样的：

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

另外：Fiddle。

最后，请注意，如果您指定一个百分比作为行高，则无法检索该值（当然，除了自己解析$('style').innerHTML之外），您将只获得当时的等效像素功能运行。

关于如何将行高应用于所有元素的问题，只需在头部注入一个<style>标记，其中包含CSS，如：

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

所以上面的代码段看起来像这样：

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

当然，如果有更多具有!important的特定选择器，这将无效，但除此之外它甚至会覆盖内联样式属性。

请参阅updated fiddle。

javascript改变身体的线条高度

1 个答案: