使用Javascript檢測URL並應用CSS

所以我有一個頁面我想應用一些CSS，但它是由CMS動態生成的。該URL保持不變，所以我想我可以堅持在模板文件的頭部添加CSS到我想要的頁面，但它不起作用。使用Javascript檢測URL並應用CSS

<script type="text/javascript"> 
jQuery(document).ready(function() { 
if(window.location.href.indexOf("/products.html")) 
{ 
document.write("<style type=\"text/css\"> 
.category-grid li:nth-child(4) 
{ 
margin-left:115px; 
} 
</style>"); 
} 
}); 
</script>

有可能是一些語法關上我的document.write聲明，因爲這是在錯誤似乎發生，但我無法弄清楚。有任何想法嗎？

來源

2012-03-12 miles

似乎傻了後端不這樣做。 – epascarello 2012-03-12 15:52:56

這很愚蠢。這是Magento。 – miles 2012-03-12 15:54:08

有沒有辦法你可以只寫上下文的CSS，以便沒有涉及腳本？ – Henry 2012-03-12 15:55:46

引號未正確終止。

此外，你應該不推遲document.write，因爲它會覆蓋當前文檔。另外，將indexOf的結果與-1進行比較。如果未找到子字符串，則以前的代碼仍會注入腳本，因爲!!-1爲true。

您的代碼可以被固定在這樣：

<script> 
if (location.href.indexOf("dev.obtura.com/products.html") !== -1) { 
    document.write("<style>" + 
    ".category-grid li:nth-child(4){" + 
    " margin-left:115px;" + 
    "}" + 
    "</style>"); 
} 
</script>

來源

2012-03-12 15:51:49

不能在一個jQuery的「準備」處理程序使用document.write()。瀏覽器完成構建DOM（這是「就緒」處理程序暗示的內容）後，對document.write的後續調用將會銷燬該頁面。

而是這樣做，你可以做什麼是使用一些CSS規則，你永遠有，但由一個體類資格：

.products .category-grid li:nth-child(4) { 
    margin-left: 115px; 
}

那麼你的腳本將添加「產品「到<body>元素的類，當id決定它是適當的頁面。

來源

2012-03-12 15:52:40 Pointy

啊哈，沒有看到這個答案。請爲了理智而這樣做。 – Henry 2012-03-12 16:01:42

也許你對yepnope.js更滿意。有了這個，你可以選擇CSS或JS來動態加載。

像這樣的

yepnope({ 
    test : function(){return window.location.href.indexOf("dev.obtura.com/products.html") === -1}, 
    yep : 'style.css', 
    nope : 'products.css' 
})

來源

2012-03-12 15:54:01 HerrSerker

，如果你的CSS樣式存儲您可以使用jQuery的append方法，而不是document.write

<script> 
if (location.href.indexOf('dev.obtura.com/products.html') != -1) 
{ 
    //match! 
    $('head').append('<link rel="stylesheet" type="text/css" href="your_stylesheet.css">'); 
} 
</script>

HTH一個樣式表文件中，

--hensson

來源

2012-03-12 16:05:28 hennson

顯然你可以這樣做，但我不認爲它是做這件事的好方法。這種做法似乎是一種維護和閱讀的痛苦。一些更好的方法，我能想到的：

靜態添加其他類進入，您可以使用，只是該文檔
應用CSS選擇器的文檔添加風格標籤只是頁面
如果你想用jQuery來應用它，可以這樣做（沒有測試過，但應該是關閉的）：

$（'。category-grid li：nth-child（4）'）。css（'margin-左'，'115px'）
yunzen's建議使用yepnope。

來源

2012-03-12 16:08:21

使用Javascript檢測URL並應用CSS

回答

相關問題