JavaScript和CSS通过expression实现Table居中显示


Posted in Javascript onJune 28, 2013

上篇博客说的是将div设置为居中显示,今天来分享一下如何将表格居中的显示。至于居中的原理就不说了,可以看一下我的上篇博客,这次没有使用window的两个事件,而是使用一个叫expression的函数。现在多数的浏览器都支持这个函数。在写上一篇博客的时候,我脑里想能不能把计算后的值赋给css的left和top属性呢?后来查阅资料找到了这个函数。这个函数用来把CSS属性和JavaScript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义的属性。就是说CSS属性后面可以是一段JavaScript表达式,CSS属性的值等于JavaScript的结果。在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

好了先看一下居中的源码吧!
JavaScript和CSS通过expression实现Table居中显示 
可以很清楚的看到expression函数内写的值是那个总结的公式。即文档的高宽减去自身的高宽,然后除以2就是top和left的值了。将这段代码放到style属性里就居中了。如图所示:
JavaScript和CSS通过expression实现Table居中显示 
这样就可以居中显示了。
会不会想把这段代码写到css里去呢,答案是可以的,这样之后代码就变成了如下这个样子:
JavaScript和CSS通过expression实现Table居中显示 
这样就可以通过CSS和JavaScript使table居中的显示了,这样做登录页面的时候就好看了。很简单吧!

Javascript 相关文章推荐
JS 显示当前日期与时间的代码
Mar 24 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 Javascript
jquery异步跨域访问代码
Jun 28 #Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 #Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 #Javascript
jquery中通过父级查找进行定位示例
Jun 28 #Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 #Javascript
JavaScript操纵窗口的方法小结
Jun 28 #Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 #Javascript
You might like
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
python分割和拼接字符串
2013/11/01 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
英语专业毕业个人求职自荐信
2013/09/21 职场文书
优秀士兵个人事迹材料
2014/01/19 职场文书
大学生村官事迹材料
2014/01/21 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
python运算符之与用户交互
2022/04/13 Python