中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

您的位置: 首頁 > 技術(shù)文檔 > 網(wǎng)頁制作 > JavaScript Table行定位效果
RDFa介紹——構(gòu)建更友好的web頁面 回到列表 CSS定位屬性Position詳解
 JavaScript Table行定位效果

作者:cloudgamer 時間: 2009-09-17 文檔類型:原創(chuàng) 來自:藍(lán)色理想

第 1 頁 JavaScript Table行定位效果 [1]
第 2 頁 JavaScript Table行定位效果 [2]
第 3 頁 JavaScript Table行定位效果 [3]
第 4 頁 JavaScript Table行定位效果 [4]
第 5 頁 JavaScript Table行定位效果 [5]
第 6 頁 JavaScript Table行定位效果 [6]
第 7 頁 JavaScript Table行定位效果 [7]
第 8 頁 JavaScript Table行定位效果 [8]

【設(shè)置td寬度】

接下來就要設(shè)置td寬度了,要獲取某元素的寬度可以通過以下方法:

  1. 支持defaultView的可以直接用getComputedStyle獲取width。
  2. 獲取offsetWidth,再減去border和padding的寬度。
    這個本來也可以,但td的border寬度的獲取比較麻煩,下面有更方便的方法。
  3. 獲取clientWidth,再減去padding的寬度。
    這個跟方法2差不多,但更簡單方便。

注意ie的currentStyle不像getComputedStyle能獲取準(zhǔn)確值,而只是一個設(shè)置值,像百分比、auto這些并不會自動轉(zhuǎn)成準(zhǔn)確值,即使是得到準(zhǔn)確值也不一定是實際值,像td即使設(shè)置一個很大的準(zhǔn)確值,實際值也不會超過table本身的寬度。
所以在td這種比較特殊的結(jié)構(gòu)中,除非是很理想的狀況,否則用currentStyle基本沒戲,而且在這個效果中即使是差了1px也會看不舒服。
對于支持defaultView的當(dāng)然可以直接獲取,否則就用上面的方法3來獲。

style.width = (document.defaultView ? parseFloat(css.width)
    : (o.clientWidth - parseInt(css.paddingLeft) - parseInt(css.paddingRight))) + "px";

但這里不管哪個方法都有一個問題,就是出現(xiàn)scroll的情況,不過還好td這個元素即使設(shè)置了overflow為scroll也不會出現(xiàn)滾動條,除了ie8和chrome。
程序沒對這個情況做處理,畢竟給td設(shè)scroll也不常見,而且支持這個的瀏覽器不多,沒必要花太多時間在這里。
ps:關(guān)于td寬度的自動調(diào)整可以參考w3c的table-layout部分。

如果有影響原td結(jié)構(gòu)的設(shè)置,例如colspan之類的就要留意,錯誤的結(jié)構(gòu)很可能導(dǎo)致一些異常變形。
如果對原表格結(jié)構(gòu)或內(nèi)容做了修改,應(yīng)該執(zhí)行一次Clone方法重構(gòu)新table。
本部分對體驗比較重要,如果設(shè)置不當(dāng)就會有變形的感覺,很不美觀。

【borderCollapse】

上面說到td的border寬度的獲取比較麻煩,那到底有多煩呢?
如果只是一般情況的話,通過borderLeftWidth和borderRightWidth獲取寬度就可以了。
ps:如果borderStyle是"none"的話,那么border就會沒效,所以如果要取border寬度的話最好先判斷一下borderStyle是不是"none"。

但table有一個特別的樣式borderCollapse,設(shè)置table的邊框模型。
它有兩個值,分別是separate(分開,默認(rèn)值)和collapse(合并)。
separate就是我們一般看到的效果,這里主要討論collapse,先看mozilla怎么說的:
In the collapsed border model, adjacent table cells share borders.
意思是在collapse border模型中,相鄰的td會共用邊框。看下面的例子會更明白:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<body>
<style type="text/css">
.t{line-height:40px;width:200px; }
.t td{border:5px solid #999;}
</style>
<table class="t" style="border-collapse:collapse;">
  <tr>
    <td width="50">&nbsp;</td>
    <td style="border-left-width:10px; border-left-style:dotted;">&nbsp;</td>
    <td width="50">&nbsp;</td>
  </tr>
</table>
<table class="t">
  <tr>
    <td width="50">&nbsp;</td>
    <td style="border-left-width:10px; border-left-style:dotted;">&nbsp;</td>
    <td width="50">&nbsp;</td>
  </tr>
</table>
</body>
</html>

可以看到使用collapse之后,相鄰td的邊框都合并成一條而且是以相鄰邊框中寬度較大的那條為準(zhǔn)。
那td跟table之間呢,參考下面的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<body>
<style type="text/css">
.t{line-height:40px;width:200px;border-collapse:collapse;}
.t td{border:5px solid #999;}
</style>
<table class="t" id="t1">
  <tr>
    <td width="50" style="border-left:10px dotted #999;">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="50">&nbsp;</td>
  </tr>
</table>
<br />
<table class="t" id="t2" style="border-left:10px dotted #999;">
  <tr>
    <td width="50">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="50">&nbsp;</td>
  </tr>
</table>
</body>
</html>

可見table和td之間也是遵從同樣規(guī)則。
還有的是當(dāng)設(shè)置了collapse那cellspacing就無效了。順便說說border-spacing,它其實就是cellspacing在css中的樣式形式,只是ie在ie8才開始支持,詳細(xì)可以看
mozilla的說明。

collapse的一個常見應(yīng)用是做邊框表格,例如1px邊框的表格:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<body>
<style type="text/css">
.t{line-height:40px;width:200px;}

.t1{border-collapse:collapse;}
.t1 td{border:1px solid #999;}

.t2{background-color:#999;}
.t2 td{background-color:#FFF;}
</style>
<table class="t t1">
  <tr>
    <td width="50">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="50">&nbsp;</td>
  </tr>
</table>
<table class="t t2" cellspacing="1">
  <tr>
    <td width="50">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="50">&nbsp;</td>
  </tr>
</table>
</body>
</html>

前者用的collapse,后者是用table背景色模擬,雖然效果都一樣,但前者顯然較好,才是真正的“邊框”。

在使用了collapse之后,要寫一個通用的獲取邊框?qū)挾瘸绦驎兊檬致闊,而且有些情況下甚至沒辦法判斷獲取。
詳細(xì)情況這里就不細(xì)說了,有興趣研究的話可以看看w3c的The collapsing border model,當(dāng)然要想全部了解的話還要在各個瀏覽器中研究。

出處:藍(lán)色理想
責(zé)任編輯:bluehearts

上一頁 JavaScript Table行定位效果 [4] 下一頁 JavaScript Table行定位效果 [6]

◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評論。

相關(guān)文章 更多相關(guān)鏈接
再談動態(tài)添加樣式規(guī)則
Javascript函數(shù)類型判斷解決方案
認(rèn)識Javascript數(shù)組
解讀javascript的計時器 I
JavaScript獲取事件對象的注意點
作者文章 更多作者文章
JavaScript 浮動定位提示效果
JavaScript 顏色梯度和漸變效果
JavaScript Tween算法及緩動效果
仿Apple滑動條(拖動)產(chǎn)品展示效果
JavaScript 圖片切割效果
關(guān)鍵字搜索 常規(guī)搜索 推薦文檔
熱門搜索:CSS Fireworks 設(shè)計比賽 網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點最新 站點最新列表
周大福“敬•自然”設(shè)計大賽開啟
國際體驗設(shè)計大會7月將在京舉行
中國國防科技信息中心標(biāo)志征集
云計算如何讓安全問題可控
云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會
阿里行云
云手機年終巨獻(xiàn),送禮標(biāo)配299起
阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機主題設(shè)計大賽
欄目最新 欄目最新列表
淺談JavaScript編程語言的編碼規(guī)范
如何在illustrator中繪制臺歷
Ps簡單繪制一個可愛的鉛筆圖標(biāo)
數(shù)據(jù)同步算法研究
用ps作簡單的作品展示頁面
CSS定位機制之一:普通流
25個最佳最閃亮的Eclipse開發(fā)項目
Illustrator中制作針線縫制文字效果
Photoshop制作印刷凹凸字體
VS2010中創(chuàng)建自定義SQL Rule
>> 分頁 首頁 前頁 后頁 尾頁 頁次:5/81個記錄/頁 轉(zhuǎn)到 頁 共8個記錄

藍(lán)色理想版權(quán)申明:除部分特別聲明不要轉(zhuǎn)載,或者授權(quán)我站獨家播發(fā)的文章外,大家可以自由轉(zhuǎn)載我站點的原創(chuàng)文章,但原作者和來自我站的鏈接必須保留(非我站原創(chuàng)的,按照原來自一節(jié),自行鏈接)。文章版權(quán)歸我站和作者共有。

轉(zhuǎn)載要求:轉(zhuǎn)載之圖片、文件,鏈接請不要盜鏈到本站,且不準(zhǔn)打上各自站點的水印,亦不能抹去我站點水印。

特別注意:本站所提供的攝影照片,插畫,設(shè)計作品,如需使用,請與原作者聯(lián)系,版權(quán)歸原作者所有,文章若有侵犯作者版權(quán),請與我們聯(lián)系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內(nèi)容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內(nèi)容無關(guān)的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網(wǎng)上道德,遵守中華人民共和國的各項有關(guān)法律法規(guī)
·承擔(dān)一切因您的行為而直接或間接導(dǎo)致的民事或刑事法律責(zé)任
·本站評論管理人員有權(quán)保留或刪除其管轄評論中的任意內(nèi)容
·您在本站發(fā)表的作品,本站有權(quán)在網(wǎng)站內(nèi)轉(zhuǎn)載或引用
·參與本評論即表明您已經(jīng)閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業(yè)書推薦 更多內(nèi)容
網(wǎng)站可用性測試及優(yōu)化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網(wǎng)站UI 設(shè)計之道
《Flex 4.0 RIA開發(fā)寶典》
《贏在設(shè)計》
犀利開發(fā)—jQuery內(nèi)核詳解與實踐
作品集 更多內(nèi)容

雜⑦雜⑧ Gold NORMANA V2