编程 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实现画板的代码

Sep 05 Javascript

jquery keypress,keyup,onpropertychange键盘事件

Jun 25 Javascript

js下通过prototype扩展实现indexOf的代码

Dec 08 Javascript

在Iframe中获取父窗口中表单的值(示例代码)

Nov 22 Javascript

jQuery插件简单学习实例教程

Jul 01 Javascript

移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)

Aug 29 Javascript

JS去除字符串最后的逗号实例分析【四种方法】

Jun 20 Javascript

使用Vue 实现滑动验证码功能

Jun 27 Javascript

JavaScript面向对象中接口实现方法详解

Jul 24 Javascript

详解微信小程序工程化探索之webpack实战

Apr 20 Javascript

js实现有趣的倒计时效果

Jan 19 Javascript

微信小程序选择图片控件

Jan 19 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

VOLVO车载收音机

2021/03/02 无线电

SONY ICF-F10中波修复记

2021/03/02 无线电

php selectradio和checkbox默认选择的实现方法详解

2013/06/29 PHP

php中的PHP_EOL换行符详细解析

2013/10/26 PHP

一个很简单的jquery+xml+ajax的无刷新树结构(无css，后台是c#)

2010/06/02 Javascript

javascript 进阶篇3 Ajax 、JSON、 Prototype介绍

2012/03/14 Javascript

JavaScript中的eval()函数详解

2013/08/22 Javascript

js使用ajax读博客rss示例

2014/05/06 Javascript

JQuery中serialize()、serializeArray()和param()方法示例介绍

2014/07/31 Javascript

多个checkbox被选中时如何判断是否有自己想要的

2014/09/22 Javascript

js实现拖拽效果（构造函数）

2015/12/14 Javascript

JavaScript修改作用域外变量的方法

2016/03/25 Javascript

JavaScript闭包实例详解

2016/06/03 Javascript

nodejs处理图片的中间件node-images详解

2017/05/08 NodeJs

jquery与js实现全选功能的区别

2017/06/11 jQuery

Vue.js实现输入框绑定的实例代码

2017/08/24 Javascript

Vue的轮播图组件实现方法

2018/03/03 Javascript

jquery实现图片无缝滚动蒙版遮蔽效果

2020/01/11 jQuery

python实现K最近邻算法

2018/01/29 Python

对python中xlsx,csv以及json文件的相互转化方法详解

2018/12/25 Python

通过pykafka接收Kafka消息队列的方法

2018/12/27 Python

python制作mysql数据迁移脚本

2019/01/01 Python

Python 一键获取百度网盘提取码的方法

2019/08/01 Python

Django ORM 查询管理器源码解析

2019/08/05 Python

Python倒排索引之查找包含某主题或单词的文件

2019/11/13 Python

Python线程指南分享

2019/11/19 Python

django-利用session机制实现唯一登录的例子

2020/03/16 Python

python如何遍历指定路径下所有文件（按按照时间区间检索）

2020/09/14 Python

Matplotlib animation模块实现动态图

2021/02/25 Python

激励口号大全

2014/06/17 职场文书

环境保护与污染治理求职信

2014/07/16 职场文书

民间借贷借条范本

2015/05/25 职场文书

2016大学生毕业实习心得体会

2016/01/23 职场文书

python读取mnist数据集方法案例详解

2021/09/04 Python

css3中2D转换之有趣的transform形变效果

2022/02/24 HTML / CSS

springboot创建的web项目整合Quartz框架的项目实践

2022/06/21 Java/Android