如何在特定頁面上禁用 CSS？

Question

我為許多頁面使用了 3 個樣式表（ style1 、 style2 、 style3 ）。

• style1用於我的網頁標題，
• style2用於我的內容和
• 頁腳的style3

現在我想在我的主頁上應用一個新的stylesheet並僅對主頁禁用style2 。

我為不同的元素添加了新類，但在某些地方它仍然檢測到我以前的stylesheet 。 如何在特定頁面上禁用 CSS？

Answer 1

由於您沒有包含代碼來查看您的操作方式，並且考慮到您將標頭作為包含文件：

使用 PHP：

在您的主頁中包含標題之前：

<?php $homepage = 1; ?>

//include your header//

在您引用 CSS 的標題中：

<link href="css/style1.css" rel="stylesheet" type="text/css" />

<link href="css/style3.css" rel="stylesheet" type="text/css" />

<link href="<?php if($homepage == 1){ echo "css/Home-style.css";}else{ echo "css/style2.css";}?>" rel="stylesheet" type="text/css" />

您的文件應該在 PHP 中才能工作。 將“Home-style.css”更改為主頁的新 CSS 文件。

Answer 2

您必須使用jQuery來禁用stylesheet例如：

<script>
$(function () {
  if (location.pathname.indexOf('/pagename') >= 0) {
    $('link[href*="/media/css/csspagename.css"]').prop('disable', true);
  }
});
</script>

Answer 3

檢查頁面，然后獲取 dom 樣式表數組對象並禁用您想要的任何內容。

if(window.location.href.indexOf("<name in page url >") > -1) {

//Next line will disable the 2nd stylsheet in the document . 

 document.styleSheets[1].disabled = true;

}

另外僅供參考，您可以使用以下命令查看 dom 中的所有樣式表：

console.log(document.styleSheets) 

這應該為您提供要刪除的任何樣式表的適當索引。