| MozTW 討論區 https://forum.moztw.org/ |
|
| [問題]JavaScript動態載入未確定路徑之CSS https://forum.moztw.org/viewtopic.php?f=13&t=19937 |
第 1 頁 (共 1 頁) |
| 發表人: | legnaleurc [ 2007-08-02, 14:21 ] |
| 文章主題 : | [問題]JavaScript動態載入未確定路徑之CSS |
由於在CSS上遇到某些常見問題 因此被迫用JavaScript去偵測browser來載入不同的CSS 目前我是分為三個部分,即*.html,*.js,*.css 雖然js和css一定放在一起,但是html則否 所以問題是,要如何取得js檔自己的path,來確定css的path? 當然直接用JavaScript去更改CSS是最快,可是我不是非常喜歡這個方法.... |
|
| 發表人: | xacid [ 2007-08-02, 15:56 ] |
| 文章主題 : | |
legnaleurc 寫: 由於在CSS上遇到某些常見問題
因此被迫用JavaScript去偵測browser來載入不同的CSS 目前我是分為三個部分,即*.html,*.js,*.css 雖然js和css一定放在一起,但是html則否 所以問題是,要如何取得js檔自己的path,來確定css的path? 這個應該可以用： http://www.howtocreate.co.uk/jslibs/swapstyle.js 好像只要把 *.css 列為 alternate 並加上 title 就可以換，然後可以用 cookie 把把換過的樣式記錄下來。 |
|
| 發表人: | legnaleurc [ 2007-08-02, 17:24 ] |
| 文章主題 : | |
它的意思是說只要設為alternate stylesheet 就可以讓這個element有disable屬性嗎? |
|
| 發表人: | xacid [ 2007-08-02, 20:20 ] |
| 文章主題 : | |
legnaleurc 寫: 它的意思是說只要設為alternate stylesheet
就可以讓這個element有disable屬性嗎? 看起來 HTML 是沒有這個屬性，不過 DOM 有，只對 stylesheet 有效。 http://www.w3.org/TR/REC-html40/struct/ ... #edef-LINK http://www.w3.org/TR/REC-DOM-Level-1/le ... D-35143001 |
|
| 發表人: | kourge [ 2007-08-02, 22:52 ] |
| 文章主題 : | |
要用的 <link>，設成 rel="stylesheet"， 暫時不要用的 <link>，設成 rel="alternate stylesheet"。 <link> 也可以指定 id，所以可以利用這一點來 manipulate 這些 <link>。 如： <link type="text/css" id="blah1" rel="stylesheet" src="style/blah1.css" /> <link type="text/css" id="blah2" rel="alternate stylesheet" src="style/blah2.css" /> <link type="text/css" id="blah3" rel="alternate stylesheet" src="style/blah3.css" /> 假如我要啟用 blah3，停用其他的樣式，用 Prototype 可以這樣寫： 代碼: $$('link[rel="stylesheet"]').each(function(e) { e.rel = 'alternate stylesheet'; }); $('blah3').rel = 'stylesheet'; 也可以寫成： 代碼: Object.extend($$('link[rel="stylesheet"]'), { rel: 'alternate stylesheet' }); $('blah3').rel = 'stylesheet'; 或是 jQuery 寫法： 代碼: $('link[@rel="stylesheet"]').attr('rel', 'alternate stylesheet');
$('#blah3').attr('rel', 'stylesheet'); |
|
| 發表人: | legnaleurc [ 2007-08-03, 14:33 ] |
| 文章主題 : | |
感謝,受教了 果然這樣就可以切換CSS 不過在Opera上試驗的結果怪怪的 雖然已改成alternate stylesheet,它還是不為所動 所以只好採先關閉再開啟的作法了 |
|
| 發表人: | 風痕影 [ 2007-12-10, 00:42 ] |
| 文章主題 : | |
最近我也在寫這個 XD 原本是試著直接改 <link rel="stylesheet"> 的 href 屬性 缺點是：Fx 的 [檢視 > 頁面樣式] 這邊如果選了不同的樣式，其結果會是兩種樣式加在一起 XD 而且這個方法會在選第二次時，讓 IE Crash 囧" 剛才突然想起這篇，跑來看看，終於弄懂了 disabled 的用法 IE 果然再也不會出問題啦 XD 而且再也不會和 Fx 的 [頁面樣式] 衝突了 不過，在試驗的途中，我發現 Firefox 有個奇怪的問題... 無論有沒有用 JavaScript 改過樣式，甚至根本沒這段 JavaScript 當我按下 [預覽列印] 時，看到的卻是沒有樣式的頁面 而非我用 <link media="print"> 指定的列印用樣式 (以下用 print.css 代稱) 除非在我按下之前，做了以下兩件事情的其中一個：
做完以後，無論是否有用 JavaScript 切換到其他樣式，[預覽列印] 中都可以看到 print.css 套用後的結果 但如果做完以後用 [檢視>頁面樣式] 選了其他樣式 或者沒做以上動作，只是用 JavaScript 選擇過 print.css 樣式 ...則 [預覽列印] 中依然會是沒有樣式 抱歉說得很複雜 囧" 希望大家看得懂... |
|
| 發表人: | 風痕影 [ 2007-12-10, 06:36 ] |
| 文章主題 : | |
後來我發現，第一種動作之所以會解決問題 其實是我忘記把 media="screen" 的那份 print.css 的 rel="stylesheet" 改成 rel="alternate stylesheet" 更正以後，這問題就只有第二種解法了 ＝_______＝" 嗯，剛才用 Opera 看了一下，它也有類似的問題... 試著在螢幕用的樣式裡加上 @import url(print.css) print; 也不行 0rz 最後，我乾脆直接用 <style> 結果 Firefox 就正常了 ＝_______＝" |
|
| 第 1 頁 (共 1 頁) | 所有顯示的時間為 UTC + 8 小時 |
| Powered by phpBB® Forum Software © phpBB Group https://www.phpbb.com/ |
|