Re: [問題] JAVACRIPT與CSS應用?

看板Web_Design作者 (死城盜賊)時間12年前 (2012/06/20 16:46), 編輯推噓11(11推 0噓 22→)
留言33則, 5人參與, 最新討論串2/2 (看更多)
※ 引述《pl132 (pl132)》之銘言： : 小弟又來獻醜了~~ : 我本來想做一個函式點下去之後會換成另外一個STYLE~ : 但是在實際跑的時候~他卻說必須要有物件? : 請問用了文字格式用了CSS之後~會變成不是物件嗎? : 以下是我的程式碼~~ : 一開始是CSS font2 格式是可以的~~ : 但是如果點文字下去就會出錯~~IE偵錯時說~需要有物件 : ================================= : <style type="text/css"> : .font1{ : font-size:20px; : color:red; : } : .font2 : { : font-size:30px; : color:red; : } : </style> : <script language="Javascript"> function changecss() { css1.class="font1"; css1這是個非常糟糕的寫法 雖然實際上可能可以跑(一切都要感謝偉大的IE) 但這仍然是不建議的做法 你應該遵循標準: document.getElementById("css1") 這樣才能正確的抓到DOM元素 也能避免掉一堆瀏覽器相容性問題.. 第二個問題是class 這東西是javascript的保留字之一 而且還是沒有意義的那種 正確的屬性名稱應為.className 所以正確的寫法應為: document.getElementById("css1").className = "fon1"; } : </script> <font id="css1" class="font2" onclick="changecss()">本行為Javascript與CSS混合 測試用</font> 那這邊我也是要建議你不要使用font當標籤 這也是一個非標準的寫法(又要感謝偉大的IE了) 你可以用<span>或<div>標籤當做wrapper onclick也是個問題 行內宣告會在後續維護上產生問題 標準寫法是使用javascript去綁上event document.getElementById("css1").addEventListener(type, function) 不過這裡我不建議這樣寫啦..初學者先用onclick還OK 因為照標準寫會撞到瀏覽器相容性問題...(還是要感謝IE) IE一定會撞牆 除非你有正確宣告doctype且版本大於6 就算是IE9 只要進入quirks模式 用addEventListener就會撞牆 而Firefox Chrome Opera之類 因為軟體設計上都照標準走 所以沒問題 以上的廢話都可以整理成一個範例:http://jsfiddle.net/aMqSD/ -- 至於要如何用class去取DOM元素那又是另外一回事了... -- 標題 [菜單] 最便宜的I7菜單? CPU (中央處理器)：Intel I7-3770四核 3.4GHz(Turbo 3.9GHz)/HD4000 9350 MB (主機板)：技嘉 B75M-D3H/M-ATX/1A1D1H/4*DDR3/前置19Pin U3 2590 RAM (記憶體)：AMD DDR3 4G*2(共8G)-1600雙通道一組 1350 PSU (電源供應器)：黑神駒 + 核源 460W電源 1390
推
06/05 03:46,
這單完全是家暴吧，要好好對待愛妻阿！
06/05 03:46
-- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 59.127.251.59
→
06/20 16:47, , 1F
奇怪耶 最近發文怎麼都跳這個簽名檔呢QQ
06/20 16:47, 1F
→
06/20 16:57, , 2F
對了 強烈建議原原PO去買本書來看QQ
06/20 16:57, 2F
推
06/20 17:02, , 3F
專業~~想說老師都教很淺(因為是商務學程XD)~原來還有那麼深
06/20 17:02, 3F
推
06/20 17:07, , 4F
所以以後全面改用CSS去做格式設定~然後font格式廢除?
06/20 17:07, 4F
是的 這樣也比較好維護 另外就是我認為html的標籤是具有意義的 不能隨便亂混用 排版用的wrapper我會習慣用div 通常都會表現成一個區塊 文字用的wrapper(如同本文的範例)我會用span或div 要注意的是div會造成換行效果 span不會 然後文字大小的部分可以善用<h1> <h2>... 文章段落能用<p>等等 我就看過整個網頁都用<div>或是<table>刻出來 老實說這樣會讓人找不到重點 維護會很麻煩... ※ 編輯: s25g5d4 來自: 59.127.251.59 (06/20 17:13)
推
06/20 17:21, , 5F
所以全用DREAMWEAVER去開發??才剛被DW騙過ORZ
06/20 17:21, 5F
→
06/20 17:21, , 6F
開發時看到的網頁跟瀏覽器看到的根本不一樣~~吐血中....
06/20 17:21, 6F
→
06/20 17:26, , 7F
className = "fon1"; 少個t XD
06/20 17:26, 7F
→
06/20 17:34, , 8F
我沒說用DW開發阿...
06/20 17:34, 8F
推
06/20 17:36, , 9F
不然業界都用哪一套軟體???小弟只是要畢業的學生~DW比較有名
06/20 17:36, 9F
→
06/20 18:02, , 10F
(汗) 我好像幫自己挖坑了..
06/20 18:02, 10F
→
06/20 18:02, , 11F
用DW可以 只是還要參酌實際瀏覽器的畫面
06/20 18:02, 11F
→
06/20 18:03, , 12F
沒記錯的話DW得排版引擎好像是Opera來的
06/20 18:03, 12F
→
06/20 18:03, , 13F
會純code的話哪套都可以，我用DW純粹方便他幫我找變數
06/20 18:03, 13F
→
06/20 18:03, , 14F
還可以用firebug或是chrome內建的控制台去弄
06/20 18:03, 14F
推
06/20 18:14, , 15F
對了~問你一下= =我開發的網頁還有救嗎~~因為DW的圖樣
06/20 18:14, 15F
→
06/20 18:14, , 16F
跟柳覽器看到的不同~~而且想回去設定~又因為太繁雜
06/20 18:14, 16F
→
06/20 18:14, , 17F
不好設定= =
06/20 18:14, 17F
→
06/20 18:15, , 19F
還有救嗎==
06/20 18:15, 19F
→
06/20 18:16, , 20F
原先我的表格寬高都是正常的~~但是一到IE去看就被拉長了
06/20 18:16, 20F
→
06/20 18:16, , 21F
所以圖片都重複出現了~~請問有救嗎
06/20 18:16, 21F
→
06/20 18:34, , 22F
你table的結構有問題
06/20 18:34, 22F
→
06/20 18:35, , 23F
切換到原始碼去看...
06/20 18:35, 23F
<tr> <td height="61" bgcolor="#CCFF00">&nbsp;</td> <td align="center" valign="middle" bgcolor="#FFFF33"background=" 各國旗幟/歐洲/英國.gif"><p>&nbsp;</p> <p>英國</p></td> 我標藍色的地方是多餘的東西 同時也造成你的拉長問題 紅色的則是不管什麼檔案 只要是從外部載入的 路徑都不建議用中文 ※ 編輯: s25g5d4 來自: 59.127.251.59 (06/20 18:43)
推
06/20 20:38, , 24F
感謝了~~那我把它全部更換~~看來有的改了~~
06/20 20:38, 24F
推
06/20 21:02, , 25F
<p>&nbsp;</p>只要有這行的都通通刪掉對吧~~
06/20 21:02, 25F
推
06/20 21:22, , 26F
天啊= =你太神了~到底怎麼知道這葛會拉長啊= =
06/20 21:22, 26F
推
06/20 21:26, , 27F
因為我在DW編輯畫面看到的時候是正常的ORZ
06/20 21:26, 27F
→
06/20 21:30, , 28F
firebug...
06/20 21:30, 28F
→
06/20 21:31, , 29F
IE的話按F12應該也會彈出網頁工具
06/20 21:31, 29F
推
06/20 22:37, , 30F
他會主動說明你問題?
06/20 22:37, 30F
→
06/20 23:05, , 31F
不...他是個工具...可以修改/查看網頁DOM
06/20 23:05, 31F
→
06/20 23:06, , 32F
而且是即時性的
06/20 23:06, 32F
推
06/21 11:59, , 33F
電蝦鄉民耶~
06/21 11:59, 33F
‣ 更多 s25g5d4 的文章
文章代碼(AID): #1FuOtt1k (Web_Design)
討論串 (同標題文章)
本文引述了以下文章的的內容：
完整討論串 (本文為第 2 之 2 篇)：
排序： 最舊先 | 最新先 | 留言數
在新視窗開啟完整討論串 (共2篇)
‣ 更多 s25g5d4 的文章
文章代碼(AID): #1FuOtt1k (Web_Design)