JavaScript和CSS通過expression實(shí)現(xiàn)Table居中顯示
更新時(shí)間：2013年06月28日 16:30:29 作者：
如何將表格居中的顯示使用一個(gè)叫expression的函數(shù),多數(shù)的瀏覽器都支持這個(gè)函數(shù)，感興趣的朋友可以看一下具體的實(shí)現(xiàn)哈
上篇博客說的是將div設(shè)置為居中顯示，今天來分享一下如何將表格居中的顯示。至于居中的原理就不說了，可以看一下我的上篇博客，這次沒有使用window的兩個(gè)事件，而是使用一個(gè)叫expression的函數(shù)?，F(xiàn)在多數(shù)的瀏覽器都支持這個(gè)函數(shù)。在寫上一篇博客的時(shí)候，我腦里想能不能把計(jì)算后的值賦給css的left和top屬性呢？后來查閱資料找到了這個(gè)函數(shù)。這個(gè)函數(shù)用來把CSS屬性和JavaScript表達(dá)式關(guān)聯(lián)起來，這里的CSS屬性可以是元素固有的屬性，也可以是自定義的屬性。就是說CSS屬性后面可以是一段JavaScript表達(dá)式，CSS屬性的值等于JavaScript的結(jié)果。在表達(dá)式中可以直接引用元素自身的屬性和方法，也可以使用其他瀏覽器對(duì)象。這個(gè)表達(dá)式就好像是在這個(gè)元素的一個(gè)成員函數(shù)中一樣。
好了先看一下居中的源碼吧！
可以很清楚的看到expression函數(shù)內(nèi)寫的值是那個(gè)總結(jié)的公式。即文檔的高寬減去自身的高寬，然后除以2就是top和left的值了。將這段代碼放到style屬性里就居中了。如圖所示：
這樣就可以居中顯示了。
會(huì)不會(huì)想把這段代碼寫到css里去呢，答案是可以的，這樣之后代碼就變成了如下這個(gè)樣子：
這樣就可以通過CSS和JavaScript使table居中的顯示了，這樣做登錄頁面的時(shí)候就好看了。很簡(jiǎn)單吧！
好了先看一下居中的源碼吧！
可以很清楚的看到expression函數(shù)內(nèi)寫的值是那個(gè)總結(jié)的公式。即文檔的高寬減去自身的高寬，然后除以2就是top和left的值了。將這段代碼放到style屬性里就居中了。如圖所示：
這樣就可以居中顯示了。
會(huì)不會(huì)想把這段代碼寫到css里去呢，答案是可以的，這樣之后代碼就變成了如下這個(gè)樣子：
這樣就可以通過CSS和JavaScript使table居中的顯示了，這樣做登錄頁面的時(shí)候就好看了。很簡(jiǎn)單吧！
您可能感興趣的文章:
- css列表標(biāo)簽list與表格標(biāo)簽table詳解
- jQuery+CSS實(shí)現(xiàn)的table表格行列轉(zhuǎn)置功能示例
- JS實(shí)現(xiàn)的樣式切換功能tableCSS實(shí)例
- jquery css 設(shè)置table的奇偶行背景色示例
- 拖動(dòng)table標(biāo)題實(shí)現(xiàn)改變td的大小(css+js代碼)
- CSS+Table圖文混排中實(shí)現(xiàn)文本自適應(yīng)圖片寬度（超簡(jiǎn)單+跨所有瀏覽器）
- css之使table也能overflow:hidden
- 推薦一個(gè)好看Table表格的css樣式代碼詳解
相關(guān)文章
uniapp使用uni-imei插件獲取手機(jī)的設(shè)備號(hào)
uniapp框架是一款開發(fā)跨平臺(tái)應(yīng)用的工具,它支持iOS、Android以及Web等多個(gè)平臺(tái),在這些平臺(tái)中,uniapp可以訪問某些設(shè)備的硬件信息,這篇文章主要給大家介紹了關(guān)于uniapp使用uni-imei插件獲取手機(jī)設(shè)備號(hào)的相關(guān)資料,需要的朋友可以參考下2024-01-01
layui的select聯(lián)動(dòng)實(shí)現(xiàn)代碼
今天小編就為大家分享一篇layui的select聯(lián)動(dòng)實(shí)現(xiàn)代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
指定js可訪問其它域名的cookie的方法...2007-09-09
JavaScript邏輯運(yùn)算符相關(guān)總結(jié)
這篇文章主要介紹了JavaScript邏輯運(yùn)算符的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
消息/事件機(jī)制是幾乎所有開發(fā)語言都有的機(jī)制，并不是deviceone的獨(dú)創(chuàng)，在某些語言稱之為消息(Event),有些地方稱之為(Message).接下來通過本文給大家介紹JS事件和消息機(jī)制的理解 ，需要的朋友一起學(xué)習(xí)吧2016-04-04
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)無縫輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
JavaScript 實(shí)現(xiàn)同時(shí)選取多個(gè)時(shí)間段的方法
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)同時(shí)選取多個(gè)時(shí)間段的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了如何用JavaScript讓你的瀏覽器說話，對(duì)語音感興趣的同學(xué)，可以實(shí)驗(yàn)一下2021-04-04
這篇文章主要給大家介紹了關(guān)于使用Node版本升級(jí)和降級(jí)的相關(guān)資料,在開發(fā)的工程中我們可能需要經(jīng)常切換node版本來應(yīng)對(duì)不同的開發(fā)環(huán)境,所以需要經(jīng)常使用不同版本的node,需要的朋友可以參考下2023-09-09
javascript form 驗(yàn)證函數(shù) 彈出對(duì)話框形式
javascript合法驗(yàn)證 js數(shù)據(jù)驗(yàn)證、js email驗(yàn)證、js url驗(yàn)證、js長(zhǎng)度驗(yàn)證、js數(shù)字驗(yàn)證等(彈出對(duì)話框形式)2009-06-06