编程 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+css 网页每次加载不同样式的实现方法

Dec 27 Javascript

JavaScript(JS) 压缩 / 混淆 / 格式化批处理工具

Dec 10 Javascript

基于jQuery选择器的整理集合

Apr 26 Javascript

JavaScript实现仿网易通行证表单验证

May 25 Javascript

js面向对象的写法

Feb 19 Javascript

谈一谈jQuery核心架构设计

Mar 28 Javascript

JS 仿支付宝input文本输入框放大组件的实例

Nov 14 Javascript

详解如何在微信小程序开发中正确的使用vant ui组件

Sep 13 Javascript

解决vue项目nginx部署到非根目录下刷新空白的问题

Sep 27 Javascript

前端Vue项目详解--初始化及导航栏

Jun 24 Javascript

微信小程序整个页面的自动适应布局的实现

Jul 12 Javascript

JavaScript文档对象模型DOM

Nov 20 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

第十节抽象方法和抽象类 [10]

2006/10/09 PHP

Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法

2010/12/29 PHP

PHP时间戳与日期之间转换的实例介绍

2013/04/19 PHP

PHP中使用Imagick操作PSD文件实例

2015/01/26 PHP

php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法

2016/10/12 PHP

PHP+ajax实现二级联动菜单功能示例

2018/08/10 PHP

PHP获取星期几的常用方法小结

2018/12/18 PHP

thinkPHP5框架实现多数据库连接，跨数据连接查询操作示例

2019/05/29 PHP

jquery提示 "object expected"的解决方法

2009/12/13 Javascript

JavaScript 学习技巧

2010/02/17 Javascript

精通Javascript系列之Javascript基础篇

2011/06/07 Javascript

jquery中html、val与text三者属性取值的联系与区别介绍

2013/12/29 Javascript

jquery访问ashx文件示例代码

2014/08/11 Javascript

JS实现自动固定顶部的悬浮菜单栏效果

2015/09/16 Javascript

javascript实现省市区三级联动下拉框菜单

2015/11/17 Javascript

JavaScript中Object.prototype.toString方法的原理

2016/02/24 Javascript

移动端网页开发调试神器Eruda的介绍与使用技巧

2017/10/30 Javascript

Angular4实现图片上传预览路径不安全的问题解决

2017/12/25 Javascript

Angular4集成ng2-file-upload的上传组件

2018/03/14 Javascript

vue里如何主动销毁keep-alive缓存的组件

2019/03/21 Javascript

jQuery删除/清空指定元素的所有子节点实例代码

2019/07/04 jQuery

微信小程序分包加载代码实现方法详解

2019/09/23 Javascript

[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16

2018/08/17 DOTA

Python实现的一个找零钱的小程序代码分享

2014/08/25 Python

python打包压缩、读取指定目录下的指定类型文件

2018/04/12 Python

python 切换root 执行命令的方法

2019/01/19 Python

50行Python代码获取高考志愿信息的实现方法

2019/07/23 Python

Python 变量的创建过程详解

2019/09/02 Python

Python:type、object、class与内置类型实例

2019/12/25 Python

Python魔术方法专题

2020/06/19 Python

巧用CSS3 border实现图片遮罩效果代码

2012/04/09 HTML / CSS

html5如何在Canvas中实现自定义路径动画示例

2017/09/18 HTML / CSS

日本无添加化妆品：HABA

2016/08/18 全球购物

教师自我剖析材料（群众路线）

2014/09/29 职场文书

廉洁自律个人总结

2015/02/14 职场文书

css3中transform属性实现的4种功能

2021/08/07 HTML / CSS