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居中的显示了,这样做登录页面的时候就好看了。很简单吧!

相关文章

  • uniapp使用uni-imei插件获取手机的设备号

    uniapp使用uni-imei插件获取手机的设备号

    uniapp框架是一款开发跨平台应用的工具,它支持iOS、Android以及Web等多个平台,在这些平台中,uniapp可以访问某些设备的硬件信息,这篇文章主要给大家介绍了关于uniapp使用uni-imei插件获取手机设备号的相关资料,需要的朋友可以参考下
    2024-01-01
  • layui的select联动实现代码

    layui的select联动实现代码

    今天小编就为大家分享一篇layui的select联动实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 指定js可访问其它域名的cookie的方法

    指定js可访问其它域名的cookie的方法

    指定js可访问其它域名的cookie的方法...
    2007-09-09
  • JavaScript逻辑运算符相关总结

    JavaScript逻辑运算符相关总结

    这篇文章主要介绍了JavaScript逻辑运算符的相关资料,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-09-09
  • 谈一谈JS消息机制和事件机制的理解

    谈一谈JS消息机制和事件机制的理解

    消息/事件机制是几乎所有开发语言都有的机制,并不是deviceone的独创,在某些语言称之为消息(Event),有些地方称之为(Message).接下来通过本文给大家介绍JS事件和消息机制的理解 ,需要的朋友一起学习吧
    2016-04-04
  • 原生js实现无缝轮播图效果

    原生js实现无缝轮播图效果

    这篇文章主要为大家详细介绍了原生js实现无缝轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • JavaScript 实现同时选取多个时间段的方法

    JavaScript 实现同时选取多个时间段的方法

    这篇文章主要介绍了JavaScript 实现同时选取多个时间段的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 如何用JavaScript让你的浏览器说话

    如何用JavaScript让你的浏览器说话

    这篇文章主要介绍了如何用JavaScript让你的浏览器说话,对语音感兴趣的同学,可以实验一下
    2021-04-04
  • Node版本升级和降级完整步骤

    Node版本升级和降级完整步骤

    这篇文章主要给大家介绍了关于使用Node版本升级和降级的相关资料,在开发的工程中我们可能需要经常切换node版本来应对不同的开发环境,所以需要经常使用不同版本的node,需要的朋友可以参考下
    2023-09-09
  • javascript form 验证函数 弹出对话框形式

    javascript form 验证函数 弹出对话框形式

    javascript合法验证 js数据验证、js email验证、js url验证、js长度验证、js数字验证等(弹出对话框形式)
    2009-06-06

最新评论