编程 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 源码分析笔记(4) Ready函数

Jun 02 Javascript

javascript实例分享---具有立体效果的图片特效

Jun 08 Javascript

JavaScript 2048 游戏实例代码(简单易懂)

Mar 25 Javascript

VUEJS实战之修复错误并且美化时间（2）

Jun 13 Javascript

js基础之DOM中document对象的常用属性方法详解

Oct 28 Javascript

angular 用Observable实现异步调用的方法

Dec 27 Javascript

es6数据变更同步到视图层的方法

Mar 04 Javascript

详解Vue之父子组件传值

Apr 01 Javascript

JavaScript 处理树数据结构的方法示例

Jun 16 Javascript

vue实现配置全局访问路径头(axios)

Nov 01 Javascript

js函数柯里化的方法和作用实例分析

Apr 11 Javascript

详解JS数组方法

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

laravel 中如何使用ajax和vue总结

2017/08/16 PHP

匹配任意字符的正则表达式写法

2010/04/29 Javascript

禁用键盘上的(全局)指定键兼容iE、Chrome、火狐

2013/05/14 Javascript

js jquery ajax的几种用法总结(及优缺点介绍)

2014/01/28 Javascript

JavaScript操作HTML元素和样式的方法详解

2015/10/21 Javascript

全面解析Bootstrap手风琴效果

2020/04/17 Javascript

AngularJS优雅的自定义指令

2016/07/01 Javascript

JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解

2016/11/29 Javascript

vue过渡和animate.css结合使用详解

2017/06/14 Javascript

详解react-native-fs插件的使用以及遇到的坑

2017/09/12 Javascript

微信小程序实现文字跑马灯效果

2020/05/26 Javascript

Bootstrap 实现表格样式、表单布局的实例代码

2018/12/09 Javascript

mock.js实现模拟生成假数据功能示例

2019/01/15 Javascript

jQuery访问json文件中数据的方法示例

2019/01/28 jQuery

node实现socket链接与GPRS进行通信的方法

2019/05/20 Javascript

vue和iview实现Scroll 数据无限滚动功能

2019/10/31 Javascript

Python中列表、字典、元组、集合数据结构整理

2014/11/20 Python

Python的批量远程管理和部署工具Fabric用法实例

2015/01/23 Python

python实现汉诺塔方法汇总

2016/07/25 Python

python中使用正则表达式的后向搜索肯定模式(推荐)

2017/11/11 Python

python如何生成网页验证码

2018/07/28 Python

python2.7使用plotly绘制本地散点图和折线图

2019/04/02 Python

python 函数的缺省参数使用注意事项分析

2019/09/17 Python

Windows平台Python编程必会模块之pywin32介绍

2019/10/01 Python

使用python3批量下载rbsp数据的示例代码

2019/12/20 Python

惠而浦美国官网：Whirlpool.com

2021/01/19 全球购物

门诊手术室工作制度

2014/01/30 职场文书

欢迎领导标语

2014/06/27 职场文书

保险专业求职信

2014/07/07 职场文书

文员转正自我鉴定怎么写

2014/09/29 职场文书

2014年教研组工作总结

2014/11/26 职场文书

小学教师工作总结2015

2015/04/07 职场文书

致青春观后感

2015/06/09 职场文书

丧事主持词

2015/07/02 职场文书

小学记事作文之200字

2019/08/06 职场文书

Nginx 过滤静态资源文件的访问日志的实现

2021/03/31 Servers