在同一个html页面中使用多个css样式表。

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (518)

例如,如何在同一个HTML页面中使用多个CSS样式表,其中两个样式表都有一个横幅类。如何指定所指的类?

提问于
用户回答回答于

是的,你可以包含多个样式表,但你需要将它们标记为备用样式表,并为用户提供一些使用JavaScript来激活它们的方式 - 也许通过单击链接。

要创建一个备用样式表:

<link type="text/css" href="nameOfAlterateStyleSheet.css" rel="alternate stylesheet" title="Blue" />

接下来在你的Javascript文件中创建一个方法,该方法将:1.将所有样式表加载到数组中2.示例:

function getCSSArray()
{
var links = document.getElementsByTagName("link");
var link;
for(var i = 0; i < links.length; i++)
{
    link = links[i];
    if(/stylesheet/.test(link.rel))
    {
        sheets.push(link);
    }
}

    return sheets;
}

然后使用某种类型的if / else循环遍历数组,禁用不需要的样式表并启用所需的样式表。

function printView()
{
var sheet;
var title1 = "printVersion";
for(i = 0; i < sheets.length; i++)
{
    sheet = sheets[i];
            if(sheet.title == title1)
    {
        sheet.disabled = false;
    }
    else
    {
        sheet.disabled = true;
    }

最后,在你的HTML文档中创建代码,用户将激活JavaScript方法,例如:

 <a href="#" onClick ="methodName();">Link Name</a>
用户回答回答于

扫码关注云+社区

领取腾讯云代金券