如何从View中删除特定CSS文件文件的引用

时间:2016-08-17 19:19:37

标签: javascript html css asp.net-mvc

我在布局文件中引用了许多JavaScript文件和CSS文件。现在我有几个视图引用了一些干扰现有CSS文件的自定义库。所以我的问题是我可以以某种方式从这两个视图中删除这些引用,或者不允许它们在所述视图中加载。

2 个答案:

答案 0 :(得分:1)

为标记添加ID。

<link rel="stylesheet" href="style1.css" id="style1" />
<link rel="stylesheet" href="style2.css" id="style2" />

并使用此代码: 您可以使用您想要的任何事件,或者只使用代码而无需事件,这是您的选择

$("#A").click(function(){
    $("#style1").attr("disabled", "disabled");
});

注意:虽然HTML标准中没有禁用属性,但HTMLLinkElement DOM对象上有一个disabled属性。

将disabled作为HTML属性的使用是非标准的,仅供某些Microsoft浏览器使用。不要使用它。要获得类似的效果,请使用以下技术之一:

如果disabled属性已直接添加到页面上的元素,请不要包含<link>元素;

通过脚本设置DOM对象的disabled属性。

答案 1 :(得分:1)

您可以做的是,创建一个自定义的css文件,该文件覆盖常规(例如:bootstrap)css文件中的现有样式。您可以在所需视图中的常规CSS样式之后有条件地包含此css文件。

您还可以使用!important属性根据需要显式覆盖值。

因此,在您的布局中,添加一个名为CustomStyles的新部分

<head>
 <!-- Existing css include goes heree -->
    @RenderSection("CustomStyles", required: false)
</head>

在您的特定视图中,您只需包含自定义css文件

即可
@section CustomStyles
{
    <link href="~/MyCustomCss.css" rel="stylesheet">
}

编辑:根据评论。

如果您可以完全忽略某些视图中的特定css文件,则可以更新布局以有条件地包含/排除这些文件。

所以在你的布局中

<head>
@if (ViewBag.IncludeBootStrap == null|| (bool) ViewBag.IncludeBootStrap !=false)
{
    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
}
</head>

在您不想加载此css文件的视图中,将ViewBag.IncludeBootStrap值设置为false

@{
    ViewBag.IncludeBootStrap = false;
}
<h1>This view will not use bootstrap styles</h1>