javascript更改主体的线条高度

我有一个函数可以更改主体的

线宽

（我需要更改所有元素的线宽）：

如果文档的css中没有任何

行高

，则此代码工作正常，元素的所有行高都将增加， 但在某些情况下会出现奇怪的行为：

1）

document.body.style.lineHeight==”

始终为真，即使css中的正文具有

行高

2） 如果CSS中的任何元素具有

行高

，则此代码将无法更改行高。我可以得到

document.body.style.lineHeight

值，我可以看到它增加了，但文档中没有任何变化！（无视觉效果）

---

任何帮助都将不胜感激。

如评论中所述，您需要

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

也：

最后，请注意，如果您指定一个百分比作为行高，则无法检索该值（除了解析

$（'style'）。当然，innerHTML

自己），您只能在函数运行时获得等效的像素

---

至于您的问题，如何将行高度应用于所有元素，只需在头部插入一个

标记，包含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);

当然，如果有更多带有

的特定选择器，这将不起作用！重要信息

，否则它甚至会覆盖内联样式属性

---

请参阅。

第1点：

元素.style

对象直接从元素的

style

属性读取，因此它不知道CSS中设置的样式。要阅读这些内容，您需要

getComputedStyle

-如果css中的主体是指css文件中的主体，还是指样式属性中的主体？@Grundy，css文件至于第二个问题：在css中具有行高的嵌套元素忽略body.style.lineHeight，因为它有一个更具体的选择器，所以它会覆盖从body style继承的值。您将其设置为当前状态-这只是您的读取机制有误。正如Grundy所说的“CSS中具有行高的嵌套元素忽略body.style.lineHeight”，您知道如何解决此问题吗？我建议在头部中插入一个

标记。更新了我的答案。

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