使用Javascript創建內部樣式表

所以我試圖使用JavaScript在標題中創建一個內部樣式表，但它不工作。這個腳本的這一點將是突出顯示我所在頁面的選項卡。使用Javascript創建內部樣式表

下面不是我正在實施它的實際網站，只是測試 - 但它不能正常工作。這甚至有可能嗎？是的，我知道我可以用內聯CSS或其他方法做到這一點，但那樣會更容易混淆！

<html> 
<head> 
<title>Test</title> 
<script type="text/javascript"> 
function parseUrl(url) { 
    var a = document.createElement('a'); 
    a.href = url; 
    return a; 
} 

var page=parseUrl('').search 

function getSecondPart(str) { 
    return str.split('=')[1]; 
} 

var site=getSecondPart(page)); 

text.innerHTML('<style type="text/css"> 
."nav_"' + page + '" {background-color:red;} {color=green;} </style>') 

} 
</style>" 

</script> 
</head> 
<body> 
<ul> 
<li class="nav_home"><a href="testtest.html?site=home">Home</a> 
<li class="nav_forum"><a href="testtest.html?site=forum"/>Forum</a> 
<li class="nav_help"><a href="testtest.html?site=help"/>Help</a> 
<li class="nav_roster"><a href="testtest.html?site=roster"/>Roster<a/> 
</body> 
</html>

來源

2012-08-31 user1361154

我相信css已經在您的javascript運行時呈現。如果你想在內容呈現後改變類似的東西，你需要像jquery這樣的東西。 –

@Jaambageek jQuery是用Javascript編寫的，所以他可以在Javascript中做到這一點... –

好點@arxanas ...我糾正了。 –

parseURL返回一個DOM元素。
page = parseUrl('').search，如果parseUrl('')返回一個字符串，將返回字符串方法search，這本身並不是很有用。
var site=getSecondPart(page));有一個額外的括號。
text未定義。
像."nav_"4這樣的類不是有效的類。
你有一個額外的大括號。

所有這些錯誤都會阻止您的代碼運行。 Chrome的Web開發人員，Firefox的Firebug或JSHint不會出現用於確保語法錯誤的好工具。

一旦做到這一點，做這樣的事情：

var style = document.createElement("style"); 
style.innerHTML = ".nav_" + page + " { background-color: red; color: green; }"; 
document.body.appendChild(style);

來源

2012-08-31 15:19:40

有兩種適當解決方案，這是不是你問什麼，但解決您的問題。

第一種方式是在每個li S的使用不同的導航類。這就是你應該一直在做的事情。

的首選方式：

<li class="nav" id="home"> ...

您也可以做到這一點，但它不是一個好主意，因爲家裏li是獨一無二的。

<li class="nav nav-home"> ...

與

li.nav { 
    background-color: red; 
    color: green; 
}

的第二種方式是使用CSS3屬性選擇器。但是，這可能不適用於所有瀏覽器：

li[class^="nav"] { 
    background-color: red; 
    color: green; 
}

來源

2012-08-31 15:26:57

使用Javascript創建內部樣式表

回答

相關問題