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