JavaScript和CSS通过expression实现Table居中显示
更新时间：2013年06月28日 16:30:29 作者：
如何将表格居中的显示使用一个叫expression的函数,多数的浏览器都支持这个函数，感兴趣的朋友可以看一下具体的实现哈
上篇博客说的是将div设置为居中显示，今天来分享一下如何将表格居中的显示。至于居中的原理就不说了，可以看一下我的上篇博客，这次没有使用window的两个事件，而是使用一个叫expression的函数。现在多数的浏览器都支持这个函数。在写上一篇博客的时候，我脑里想能不能把计算后的值赋给css的left和top属性呢？后来查阅资料找到了这个函数。这个函数用来把CSS属性和JavaScript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义的属性。就是说CSS属性后面可以是一段JavaScript表达式，CSS属性的值等于JavaScript的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。
好了先看一下居中的源码吧！
可以很清楚的看到expression函数内写的值是那个总结的公式。即文档的高宽减去自身的高宽，然后除以2就是top和left的值了。将这段代码放到style属性里就居中了。如图所示：
这样就可以居中显示了。
会不会想把这段代码写到css里去呢，答案是可以的，这样之后代码就变成了如下这个样子：
这样就可以通过CSS和JavaScript使table居中的显示了，这样做登录页面的时候就好看了。很简单吧！
好了先看一下居中的源码吧！
可以很清楚的看到expression函数内写的值是那个总结的公式。即文档的高宽减去自身的高宽，然后除以2就是top和left的值了。将这段代码放到style属性里就居中了。如图所示：
这样就可以居中显示了。
会不会想把这段代码写到css里去呢，答案是可以的，这样之后代码就变成了如下这个样子：
这样就可以通过CSS和JavaScript使table居中的显示了，这样做登录页面的时候就好看了。很简单吧！
相关文章
uniapp框架是一款开发跨平台应用的工具,它支持iOS、Android以及Web等多个平台,在这些平台中,uniapp可以访问某些设备的硬件信息,这篇文章主要给大家介绍了关于uniapp使用uni-imei插件获取手机设备号的相关资料,需要的朋友可以参考下2024-01-01
今天小编就为大家分享一篇layui的select联动实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
指定js可访问其它域名的cookie的方法...2007-09-09
这篇文章主要介绍了JavaScript逻辑运算符的相关资料,帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-09-09
消息/事件机制是几乎所有开发语言都有的机制，并不是deviceone的独创，在某些语言称之为消息(Event),有些地方称之为(Message).接下来通过本文给大家介绍JS事件和消息机制的理解 ，需要的朋友一起学习吧2016-04-04
这篇文章主要为大家详细介绍了原生js实现无缝轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章主要介绍了JavaScript 实现同时选取多个时间段的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了如何用JavaScript让你的浏览器说话，对语音感兴趣的同学，可以实验一下2021-04-04
这篇文章主要给大家介绍了关于使用Node版本升级和降级的相关资料,在开发的工程中我们可能需要经常切换node版本来应对不同的开发环境,所以需要经常使用不同版本的node,需要的朋友可以参考下2023-09-09
javascript合法验证 js数据验证、js email验证、js url验证、js长度验证、js数字验证等(弹出对话框形式)2009-06-06
最新评论