编程 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 工具库 Cloudgamer JavaScript Library v0.1 发布

Oct 29 Javascript

JS返回iframe中frameBorder属性值的方法

Apr 01 Javascript

浅谈javascript语法和定时函数

May 03 Javascript

浅谈javascript构造函数与实例化对象

Jun 22 Javascript

javascript实现网页端解压并查看zip文件

Dec 15 Javascript

angularjs实现文字上下无缝滚动特效代码

Sep 04 Javascript

微信小程序数据统计和错误统计的实现方法

Jun 26 Javascript

javascript面向对象创建对象的方式小结

Jul 29 Javascript

node.js使用http模块创建服务器和客户端完整示例

Feb 10 Javascript

Vue项目vscode 安装eslint插件的方法(代码自动修复)

Apr 15 Javascript

解决Vue 移动端点击出现300毫秒延迟的问题

Jul 21 Javascript

javascript实现简单留言板案例

Feb 09 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

ThinkPHP分组下自定义标签库实例

2014/11/01 PHP

PHP中COOKIES使用示例

2015/07/26 PHP

php pdo oracle中文乱码的快速解决方法

2016/05/16 PHP

jQuery UI 应用不同Theme的办法

2010/09/12 Javascript

jquery鼠标停止移动事件

2013/12/21 Javascript

js获取UserControl内容为拼html时提供方便

2014/11/02 Javascript

Javascript中For In语句用法实例

2015/05/14 Javascript

javascript的列表切换【实现代码】

2016/05/03 Javascript

JS & JQuery 动态添加 select option

2016/06/08 Javascript

功能强大的Bootstrap组件（结合js）

2016/08/03 Javascript

arcgis for js 修改infowindow样式的方法

2016/11/02 Javascript

基于JavaScript实现熔岩灯效果导航菜单

2017/01/04 Javascript

javascript中apply/call和bind的使用

2017/02/15 Javascript

jQuery实现的简单无刷新评论功能示例

2017/11/08 jQuery

JS 实现百度搜索功能

2018/02/01 Javascript

详解swiper在vue中的应用(以3.0为例）

2018/09/20 Javascript

Python使用scrapy采集数据时为每个请求随机分配user-agent的方法

2015/04/08 Python

python实现向ppt文件里插入新幻灯片页面的方法

2015/04/28 Python

浅谈python中截取字符函数strip，lstrip，rstrip

2015/07/17 Python

python 计算两个日期相差多少个月实例代码

2017/05/24 Python

python中matplotlib实现最小二乘法拟合的过程详解

2017/07/11 Python

Python使用matplotlib简单绘图示例

2018/02/01 Python

python实现在IDLE中输入多行的方法

2018/04/19 Python

flask中的wtforms使用方法

2018/07/21 Python

编写多线程Python服务器最适合基础

2018/09/14 Python

pandas pivot_table() 按日期分多列数据的方法

2018/11/16 Python

python 获取utc时间转化为本地时间的方法

2018/12/31 Python

Python设计模式之状态模式原理与用法详解

2019/01/15 Python

pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法

2019/08/17 Python

Python使用tkinter实现摇骰子小游戏功能的代码

2020/07/02 Python

15个应该掌握的Jupyter Notebook使用技巧(小结)

2020/09/23 Python

瑞士灯具购物网站：Lampenwelt.ch

2018/07/08 全球购物

Moda Operandi官网：美国奢侈品电商，海淘秀场T台同款

2020/05/26 全球购物

.NET里面如何取得当前的屏幕分辨率

2012/12/06 面试题

模具数控专业自荐信

2014/01/27 职场文书

导游词300字

2015/02/13 职场文书