编程 Javascript

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属性里就居中了。如图所示：

这样就可以居中显示了。
会不会想把这段代码写到css里去呢，答案是可以的，这样之后代码就变成了如下这个样子：
JavaScript和CSS通过expression实现Table居中显示
这样就可以通过CSS和JavaScript使table居中的显示了，这样做登录页面的时候就好看了。很简单吧！

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 遍历json数组的实现代码

Sep 22 Javascript

js和css写一个可以自动隐藏的悬浮框

Mar 05 Javascript

jQuery内置的AJAX功能和JSON的使用实例

Jul 27 Javascript

js控制网页前进和后退的方法

Jun 08 Javascript

js判断文本框输入的内容是否为数字

Dec 23 Javascript

div中文字内容溢出常见的解决方法

Mar 16 Javascript

浅析JavaScript中的平稳退化（graceful degradation）

Jul 24 Javascript

VSCode 配置React Native开发环境的方法

Dec 27 Javascript

微信小程序实现图片预览功能

Jan 31 Javascript

vue+element-ui实现表格编辑的三种实现方式

Oct 31 Javascript

node 解析图片二维码的内容代码实例

Sep 11 Javascript

vue 实现图片懒加载功能

Dec 31 Vue.js

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

以文本方式上传二进制文件的PHP程序

2006/10/09 PHP

php xml文件操作代码（一）

2009/03/20 PHP

Yii2.0中使用js异步删除示例

2017/03/10 PHP

PHP的PDO错误与错误处理

2019/01/27 PHP

javascript字符串循环匹配实例分析

2015/07/17 Javascript

easyui Droppable组件实现放置特效

2015/08/19 Javascript

js实现当前输入框高亮显示的方法

2015/08/19 Javascript

jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)

2015/10/12 Javascript

jQuery原理系列-css选择器的简单实现

2016/06/07 Javascript

关于Javascript中defer和async的区别总结

2016/09/20 Javascript

JavaScript中定义对象原型的两种使用方法

2016/12/15 Javascript

Javascript blur与click冲突解决办法

2017/01/09 Javascript

js按条件生成随机json:randomjson实现方法

2017/04/07 Javascript

bootstrap是什么_动力节点Java学院整理

2017/07/14 Javascript

ES6中Array.copyWithin()函数的用法实例详解

2017/09/16 Javascript

react实现菜单权限控制的方法

2017/12/11 Javascript

手淘flexible.js框架使用和源代码讲解小结

2018/10/15 Javascript

解决vue中使用proxy配置不同端口和ip接口问题

2019/08/14 Javascript

Vue生命周期activated之返回上一页不重新请求数据操作

2020/07/26 Javascript

JS数组转字符串实现方法解析

2020/09/04 Javascript

详解React路由传参方法汇总记录

2020/11/29 Javascript

Python中为feedparser设置超时时间避免堵塞

2014/09/28 Python

安装Python的web.py框架并从hello world开始编程

2015/04/25 Python

Pandas之Fillna填充缺失数据的方法

2019/06/25 Python

python批量读取文件名并写入txt文件中

2020/09/05 Python

Django ORM filter() 的运用详解

2020/05/14 Python

python中@property的作用和getter setter的解释

2020/12/22 Python

LN-CC英国：伦敦时尚生活的缩影

2019/09/01 全球购物

党的群众路线教育实践活动学习计划

2014/11/03 职场文书

银行实习推荐信

2015/03/27 职场文书

毕业论文答辩开场白

2015/05/27 职场文书

幼儿园新学期开学寄语

2015/05/27 职场文书

入党积极分子党小组意见

2015/06/02 职场文书

2015中学教学工作总结

2015/07/22 职场文书

2015年语言文字工作总结

2015/07/23 职场文书

毕业班工作总结

2015/08/10 职场文书