编程 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实现带动画效果的经典二级导航菜单

Mar 22 Javascript

JavaScript通过function定义对象并给对象添加toString()方法实例分析

Mar 23 Javascript

javascript生成img标签的3种实现方法(对象、方法、html)

Dec 25 Javascript

详细AngularJs4的图片剪裁组件的实例

Jul 12 Javascript

vue页面使用阿里oss上传功能的实例(二)

Aug 09 Javascript

AngularJS自定义过滤器用法经典实例总结

May 17 Javascript

vue.js绑定事件监听器示例【基于v-on事件绑定】

Jul 07 Javascript

微信小程序实现左滑动删除效果

Mar 30 Javascript

微信提示在浏览器打开效果实现过程解析

Sep 10 Javascript

layui实现二维码弹窗、并下载到本地的方法

Sep 25 Javascript

js实现点击烟花特效

Oct 14 Javascript

ztree+ajax实现文件树下载功能

May 18 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

php 向访客和爬虫显示不同的内容

2009/11/09 PHP

php判断手机访问还是电脑访问示例分享

2014/01/20 PHP

PHP常用函数总结(180多个)

2016/12/25 PHP

PHP实现微信公众号验证Token的示例代码

2019/12/16 PHP

javascript基础的动画教程，直观易懂

2007/01/10 Javascript

javascript 操作cookies及正确使用cookies的属性

2009/10/15 Javascript

javascript 限制输入脚本大全

2009/11/03 Javascript

IE6 fixed的完美解决方案

2011/03/31 Javascript

jquery简单的拖动效果实现原理及示例

2013/07/26 Javascript

从零学jquery之如何使用回调函数

2014/05/16 Javascript

ES6新特征数字、数组、字符串

2016/10/01 Javascript

jQuery实现的小图列表，大图展示效果幻灯片示例

2016/10/25 Javascript

移动端日期插件Mobiscroll.js使用详解

2016/12/19 Javascript

80%应聘者都不及格的JS面试题

2017/03/21 Javascript

jQuery实现广告条滚动效果

2017/08/22 jQuery

使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)

2018/10/23 Javascript

实现vuex原理的示例

2020/10/21 Javascript

仅用500行Python代码实现一个英文解析器的教程

2015/04/02 Python

Perl中著名的Schwartzian转换问题解决实现

2015/06/02 Python

Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法

2016/04/12 Python

使用Python脚本实现批量网站存活检测遇到问题及解决方法

2016/10/11 Python

python数据结构之线性表的顺序存储结构

2018/09/28 Python

使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式

2020/01/08 Python

浅析Python 序列化与反序列化

2020/08/05 Python

Python urlopen()参数代码示例解析

2020/12/10 Python

美国大尺码女装零售商：TORRID

2016/10/01 全球购物

New Balance天猫官方旗舰店：始于1906年，百年慢跑品牌

2017/11/15 全球购物

女子锻炼服装和瑜伽服装：Splits59

2019/03/04 全球购物

New Balance俄罗斯官方网上商店：购买运动鞋

2020/03/02 全球购物

采用怎样的方法保证数据的完整性

2013/12/02 面试题

会计与审计专业自荐信范文

2014/03/15 职场文书

学员自我鉴定

2014/03/19 职场文书

教师产假请假条范文

2014/04/10 职场文书

酒店总经理岗位职责

2015/04/01 职场文书

物资采购管理制度

2015/08/06 职场文书

Spring Cloud OAuth2实现自定义token返回格式

2022/06/25 Java/Android