快捷導(dǎo)航

JavaScript和CSS通過(guò)expression實(shí)現(xiàn)Table居中顯示

更新時(shí)間：2013年06月28日 16:30:29 作者：

如何將表格居中的顯示使用一個(gè)叫expression的函數(shù),多數(shù)的瀏覽器都支持這個(gè)函數(shù)，感興趣的朋友可以看一下具體的實(shí)現(xiàn)哈

上篇博客說(shuō)的是將div設(shè)置為居中顯示，今天來(lái)分享一下如何將表格居中的顯示。至于居中的原理就不說(shuō)了，可以看一下我的上篇博客，這次沒(méi)有使用window的兩個(gè)事件，而是使用一個(gè)叫expression的函數(shù)。現(xiàn)在多數(shù)的瀏覽器都支持這個(gè)函數(shù)。在寫(xiě)上一篇博客的時(shí)候，我腦里想能不能把計(jì)算后的值賦給css的left和top屬性呢？后來(lái)查閱資料找到了這個(gè)函數(shù)。這個(gè)函數(shù)用來(lái)把CSS屬性和JavaScript表達(dá)式關(guān)聯(lián)起來(lái)，這里的CSS屬性可以是元素固有的屬性，也可以是自定義的屬性。就是說(shuō)CSS屬性后面可以是一段JavaScript表達(dá)式，CSS屬性的值等于JavaScript的結(jié)果。在表達(dá)式中可以直接引用元素自身的屬性和方法，也可以使用其他瀏覽器對(duì)象。這個(gè)表達(dá)式就好像是在這個(gè)元素的一個(gè)成員函數(shù)中一樣。

好了先看一下居中的源碼吧！

可以很清楚的看到expression函數(shù)內(nèi)寫(xiě)的值是那個(gè)總結(jié)的公式。即文檔的高寬減去自身的高寬，然后除以2就是top和left的值了。將這段代碼放到style屬性里就居中了。如圖所示：

這樣就可以居中顯示了。
會(huì)不會(huì)想把這段代碼寫(xiě)到css里去呢，答案是可以的，這樣之后代碼就變成了如下這個(gè)樣子：

這樣就可以通過(guò)CSS和JavaScript使table居中的顯示了，這樣做登錄頁(yè)面的時(shí)候就好看了。很簡(jiǎn)單吧！

您可能感興趣的文章:

相關(guān)文章

分享一個(gè)自己寫(xiě)的簡(jiǎn)單的javascript分頁(yè)組件
這篇文章主要分享一個(gè)自己寫(xiě)的簡(jiǎn)單的javascript分頁(yè)組件，效果十分不錯(cuò)，代碼也很詳盡，這里推薦給小伙伴們。
2015-02-02
JS深入學(xué)習(xí)之?dāng)?shù)組對(duì)象排序操作示例
這篇文章主要介紹了JS深入學(xué)習(xí)之?dāng)?shù)組對(duì)象排序操作,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript數(shù)組對(duì)象排序相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05
JSON 的正確用法探討：Pyhong、MongoDB、JavaScript與Ajax
這篇文章主要介紹了JSON 的正確用法探討：Pyhong、MongoDB、JavaScript與Ajax的相關(guān)資料,具有參考借鑒價(jià)值，需要的朋友一起學(xué)習(xí)吧
2016-05-05
JS實(shí)現(xiàn)適合于后臺(tái)使用的動(dòng)畫(huà)折疊菜單效果
這篇文章主要介紹了JS實(shí)現(xiàn)適合于后臺(tái)使用的動(dòng)畫(huà)折疊菜單效果,實(shí)例展示了兩種折疊菜單顯示效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)遍歷及改變頁(yè)面元素樣式的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-09-09
JS監(jiān)聽(tīng)事件的疊加和移除功能
這篇文章主要介紹了JS監(jiān)聽(tīng)事件的疊加和移除功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2018-11-11
Next.js應(yīng)用轉(zhuǎn)換為T(mén)ypeScript方法demo
這篇文章主要為大家介紹了Next.js應(yīng)用轉(zhuǎn)換為T(mén)ypeScript方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
ES6?數(shù)組some()和every()的使用及說(shuō)明
這篇文章主要介紹了ES6?數(shù)組some()和every()的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Auntion-TableSort國(guó)人寫(xiě)的一個(gè)javascript表格排序的東西
Auntion-TableSort國(guó)人寫(xiě)的一個(gè)javascript表格排序的東西...
2007-11-11
詳解開(kāi)源的JavaScript插件化框架MinimaJS
這篇文章主要介紹了開(kāi)源的JavaScript插件化框架MinimaJS的詳解,詳細(xì)的介紹了MinimaJS的使用，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-10-10
js實(shí)現(xiàn)在頁(yè)面上彈出蒙板技巧簡(jiǎn)單實(shí)用
蒙板是兩個(gè)div，其中popWindow樣式的div用于遮住整個(gè)頁(yè)面并半透明，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)js蒙版有所幫助
2013-04-04