编程 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 相关文章推荐

javascript图片相似度算法实现 js实现直方图和向量算法

Jan 14 Javascript

Jquery之Bind方法参数传递与接收的三种方法

Jun 24 Javascript

jQuery常用数据处理方法小结

Feb 20 Javascript

jquery选择器简述

Aug 31 Javascript

解决js图片加载时出现404的问题

Nov 30 Javascript

jquery通过扩展select控件实现支持enter或focus选择的方法

Nov 19 Javascript

JavaScript:Date类型全面解析

May 19 Javascript

jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】

Jul 19 Javascript

用iframe实现不刷新整个页面上传图片的实例

Nov 18 Javascript

JS正则表达式学习之贪婪和非贪婪模式实例总结

Dec 26 Javascript

详解Angular CLI + Electron 开发环境搭建

Jul 20 Javascript

JavaScript中条件语句的优化技巧总结

Dec 04 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函数解决SQL injection

2006/12/09 PHP

PHPMailer 中文使用说明小结

2010/01/22 PHP

php过滤所有恶意字符(批量过滤post,get敏感数据)

2014/03/18 PHP

Centos PHP 扩展Xchche的安装教程

2016/07/09 PHP

PHP 返回数组后处理方法(开户成功后弹窗提示)

2017/07/03 PHP

40款非常棒的jQuery 插件和制作教程（系列二）

2011/11/02 Javascript

js选取多个或单个元素的实现代码（用class）

2012/08/22 Javascript

Javascript的时间戳和php的时间戳转换注意事项

2013/04/12 Javascript

thinkphp中常用的系统常量和系统变量

2014/03/05 Javascript

使用ajax+jqtransform实现动态加载select

2014/12/01 Javascript

HTML5 实现的一个俄罗斯方块实例代码

2016/09/19 Javascript

AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】

2017/01/19 Javascript

Vue.js实现移动端短信验证码功能

2017/03/29 Javascript

cropper js基于vue的图片裁剪上传功能的实现代码

2018/03/01 Javascript

使用pm2自动化部署node项目的方法步骤

2019/01/28 Javascript

微信小程序实现录音时的麦克风动画效果实例

2019/05/18 Javascript

Python之Web框架Django项目搭建全过程

2017/05/02 Python

动态规划之矩阵连乘问题Python实现方法

2017/11/27 Python

pycharm下查看python的变量类型和变量内容的方法

2018/06/26 Python

python如何实现视频转代码视频

2019/06/17 Python

在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程

2020/08/07 Python

利用CSS3实现自定义滚动条代码分享

2016/08/18 HTML / CSS

HTML5 新旧语法标记对我们有什么好处

2012/12/13 HTML / CSS

ProBikeKit美国官网：自行车套件，跑步和铁人三项套件

2016/10/13 全球购物

优秀应届生推荐信

2013/11/09 职场文书

营业员演讲稿

2013/12/30 职场文书

2014年元旦感言

2014/03/06 职场文书

优秀的应届生自荐信

2014/05/23 职场文书

个人存款证明书

2014/10/18 职场文书

加强作风建设心得体会

2014/10/22 职场文书

物业客服专员岗位职责

2015/04/07 职场文书

建党伟业电影观后感

2015/06/01 职场文书

入党转正介绍人意见

2015/06/03 职场文书

离开雷锋的日子观后感

2015/06/09 职场文书

教师工作证明范本

2015/06/12 职场文书

MongoDB支持的数据类型

2022/04/11 MongoDB