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

正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度

Sep 27 Javascript

前端开发的开始---基于面向对象的Ajax类

Sep 17 Javascript

利用谷歌地图API获取点与点的距离的js代码

Oct 11 Javascript

javascript中的缓动效果实现程序

Dec 29 Javascript

什么是 AngularJS？AngularJS简介

Dec 06 Javascript

再分享70+免费的jquery 图片滑块效果插件和教程

Dec 15 Javascript

学习Javascript面向对象编程之封装

Feb 23 Javascript

JavaScript SHA512加密算法详细代码

Oct 06 Javascript

Bootstrap实现圆角、圆形头像和响应式图片

Dec 14 Javascript

微信小程序开发之顶部导航栏实例代码

Feb 23 Javascript

详解在vue-test-utils中mock全局对象

Nov 07 Javascript

解决VUE 在IE下出现ReferenceError: Promise未定义的问题

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

十大催泪虐心动漫电影，有几部你还没看

2020/03/04 日漫

php实现上传图片文件代码

2015/07/19 PHP

Yii2框架配置文件(Application属性)与调试技巧实例分析

2019/05/27 PHP

纯js网页画板(Graphics)类简介及实现代码

2012/12/24 Javascript

js不能跳转到上一页面的问题解决方法

2013/03/01 Javascript

JavaScript根据数据生成百分比图和柱状图的实例代码

2013/07/14 Javascript

javascript版的in_array函数（判断数组中是否存在特定值）

2014/05/09 Javascript

jquery取子节点及当前节点属性值的方法

2014/09/09 Javascript

jQuery创建DOM元素实例解析

2015/01/19 Javascript

jQuery网页右侧广告跟随滚动代码分享

2020/04/20 Javascript

jQuery+CSS实现滑动的标签分栏切换效果

2015/12/17 Javascript

JS for...in 遍历语句用法实例分析

2016/08/24 Javascript

jQuery事件绑定方法学习总结(推荐)

2016/11/21 Javascript

DropDownList实现可输入可选择（两种版本可选）

2016/12/07 Javascript

Angularjs中三种数据的绑定策略(“@”，“=”，“&”)

2016/12/23 Javascript

Angular.js中ng-if、ng-show和ng-hide的区别介绍

2017/01/20 Javascript

angularjs中使用ng-bind-html和ng-include的实例

2017/04/28 Javascript

webpack实现热加载自动刷新的方法

2017/07/30 Javascript

十个免费的web前端开发工具详细整理

2017/09/18 Javascript

React Native 混合开发多入口加载方式详解

2019/09/23 Javascript

解决Layui当中的导航条动态添加后渲染失败的问题

2019/09/25 Javascript

Python排序算法实例代码

2017/08/10 Python

tf.truncated_normal与tf.random_normal的详细用法

2018/03/05 Python

python版飞机大战代码分享

2018/11/20 Python

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

2019/06/17 Python

对Pytorch神经网络初始化kaiming分布详解

2019/08/18 Python

对python中的*args与**kwgs的含义与作用详解

2019/08/28 Python

CSS3 input框的实现代码类似Google登录的动画效果

2020/08/04 HTML / CSS

如何减少垃圾回收让内存更加有效使用

2013/10/18 面试题

校园摄影活动策划方案

2014/02/05 职场文书

小学生优秀评语大全

2014/04/22 职场文书

文明美德伴我成长演讲稿

2014/05/12 职场文书

婚庆公司计划书

2014/09/15 职场文书

故意杀人案辩护词

2015/05/21 职场文书

2016年感恩节寄语

2015/12/07 职场文书

Vue中Object.assign清空数据报错的解决方案

2022/03/03 Vue.js