使用javascript动态添加样式表

Question

我需要在我正在构建的网站顶部使用旧的“调整大小字体”选项 - 一个是默认大小的链接，一个使字体的大小更大，另一个使它们的大小更大。它只需要影响一些导航和正文复制，所以我想简单地制作2个额外的样式表来设置这些元素的样式，点击其中一个链接后，在标题中加载一个额外的样式表。当您单击“默认”链接时，它将返回到原始大小（没有加载其他样式表）。

有没有办法在javascript中执行此操作？这是一个Wordpress网站。 或者，我可以使用js向主体添加标签并以此方式定位元素。

这样做的最佳方式是什么？

Answer 1

您应该只更改元素的类。这会将他们的css更改为样式表中该类指定的任何内容。你的第一个选择比它需要的更复杂。如果你使用JQuery，你可以直接制作这一行代码。

$("span#applicableId").each(function(){ 
    $(this).class("theOtherClass");
});

Answer 2

我会在php标签中作为include语句执行此操作。然后只需要在每个页面的顶部包含一个php文件。

php inlude info： http://php.net/manual/en/function.include.php

然后从那里我打赌那里有一些你可以重用的代码。

例如，这可能会有所帮助吗？它是一个PHP脚本，它将调整页面的CSS样式，而不会干扰其他部分。 http://www.phpclasses.org/package/1296-PHP-Resizes-text-on-a-page-using-styles-and-sessions-.html

Answer 3

我想无法将其动态添加到head标签中。当然，您可以这样做，但不会加载此样式表。也许您应该尝试通过ajax获取它并附加到您站点中的特殊脚本标记。如果用户将选择其他选项，则您将加载其他内容，清除此脚本标记并在其中添加新内容。