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

node.js中的events.emitter.listeners方法使用说明

Dec 10 Javascript

Bootstrap~多级导航(级联导航)的实现效果【附代码】

Mar 08 Javascript

jQuery改变form表单的action,并进行提交的实现代码

May 25 Javascript

只要1K 纯JS脚本送你一朵3D红色玫瑰

Aug 09 Javascript

Vue数据驱动模拟实现3

Jan 11 Javascript

Angular.js组件之input mask对input输入进行格式化详解

Jul 10 Javascript

详解vue-cli中的ESlint配置文件eslintrc.js

Sep 25 Javascript

JS设计模式之数据访问对象模式的实例讲解

Sep 30 Javascript

JS实现区分中英文并统计字符个数的方法示例

Jun 09 Javascript

微信开发之企业付款到银行卡接口开发的示例代码

Sep 18 Javascript

关于Vue源码vm.$watch()内部原理详解

Apr 26 Javascript

解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目

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

php基础知识:类与对象(3) 构造函数和析构函数

2006/12/13 PHP

Adodb的十个实例(清晰版)

2006/12/31 PHP

PHP5中的this,self和parent关键字详解教程

2007/03/19 PHP

php获取从百度搜索进入网站的关键词的详细代码

2014/01/08 PHP

php中namespace及use用法分析

2016/12/06 PHP

js 控制下拉菜单刷新的方法

2013/03/03 Javascript

jquery统计用户选中的复选框的个数

2014/06/06 Javascript

javascript学习笔记（二）数组和对象部分

2014/09/30 Javascript

Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法

2016/10/30 Javascript

bootstrapValidator自定验证方法写法

2016/12/01 Javascript

js正则表达式验证密码强度【推荐】

2017/03/03 Javascript

js实现延迟加载的几种方法

2017/04/24 Javascript

Vue路由跳转问题记录详解

2017/06/15 Javascript

详解小程序缓存插件(mrc)

2018/08/17 Javascript

Windows下支持自动更新的Electron应用脚手架的方法

2018/12/24 Javascript

element-ui 时间选择器限制范围的实现（随动）

2019/01/09 Javascript

关于ckeditor在bootstrap中modal中弹框无法输入的解决方法

2019/09/11 Javascript

JS实现商城秒杀倒计时功能(动态设置秒杀时间)

2019/12/12 Javascript

Element Tooltip 文字提示的使用示例

2020/07/26 Javascript

Python判断文件和文件夹是否存在的方法

2015/05/21 Python

Python制作刷网页流量工具

2017/04/23 Python

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

2017/05/24 Python

浅谈Tensorflow模型的保存与恢复加载

2018/04/26 Python

python 爬虫一键爬取淘宝天猫宝贝页面主图颜色图和详情图的教程

2018/05/22 Python

解决pycharm中导入自己写的.py函数出错问题

2020/02/12 Python

python实现TCP文件传输

2020/03/20 Python

python实现读取类别频数数据画水平条形图案例

2020/04/24 Python

python 19个值得学习的编程技巧

2020/08/15 Python

详解Anaconda安装tensorflow报错问题解决方法

2020/11/01 Python

JBL加拿大官方商店：扬声器、耳机等

2020/10/23 全球购物

C/C++有关内存的思考题

2015/12/04 面试题

内刊编辑求职自荐书范文

2014/02/19 职场文书

社区工作感言

2014/02/21 职场文书

幼儿教师2014年度工作总结

2014/12/16 职场文书

工艺技术员岗位职责

2015/02/04 职场文书

Nginx同一个域名配置多个项目的实现方法

2021/03/31 Servers