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

JS 显示当前日期与时间的代码

Mar 24 Javascript

js判断undefined变量类型使用typeof

Jun 03 Javascript

js实现屏蔽默认快捷键调用自定义事件示例

Jun 18 Javascript

JS+CSS实现的经典圆角下拉菜单效果代码

Oct 21 Javascript

基于Node.js实现nodemailer邮件发送

Jan 26 Javascript

js中的触发事件对象event.srcElement与event.target详解

Mar 15 Javascript

jQuery实现鼠标经过显示动画边框特效

Mar 24 jQuery

详解Vue 非父子组件通信方法（非Vuex）

May 24 Javascript

vue-cli脚手架-bulid下的配置文件

Mar 27 Javascript

angularJs使用ng-repeat遍历后选中某一个的方法

Sep 30 Javascript

Vue中图片Src使用变量的方法

Oct 30 Javascript

JavaScript设计模式--简单工厂模式定义与应用案例详解

May 23 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

phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)

2012/03/27 PHP

深入mysql_fetch_row()与mysql_fetch_array()的区别详解

2013/06/05 PHP

thinkphp模板继承实例简述

2014/11/26 PHP

php获取QQ头像并显示的方法

2014/12/23 PHP

phpcms手机内容页面添加上一篇和下一篇

2015/06/05 PHP

PHP面向对象程序设计之多态性的应用示例

2018/12/19 PHP

比Jquery的document.ready更快的方法

2010/04/28 Javascript

asp.net+jquery滚动滚动条加载数据的下拉控件

2010/06/25 Javascript

javascript中call和apply方法浅谈

2013/09/27 Javascript

jQuery自定义事件的简单实现代码

2014/01/27 Javascript

上传文件返回的json数据会被提示下载问题解决方案

2014/12/03 Javascript

jQuery过滤选择器用法分析

2015/02/10 Javascript

微信中一些常用的js方法汇总

2015/03/12 Javascript

js Canvas实现的日历时钟案例分享

2016/12/25 Javascript

JS将unicode码转中文方法

2017/05/08 Javascript

vue+swiper实现侧滑菜单效果

2017/12/28 Javascript

详解javascript函数写法大全

2019/03/25 Javascript

js遍历详解(forEach, map, for, for...in, for...of)

2019/08/28 Javascript

element实现合并单元格通用方法

2019/11/13 Javascript

jQuery实现动态操作table行

2020/11/23 jQuery

python分割和拼接字符串

2013/11/01 Python

python中子类调用父类函数的方法示例

2017/08/18 Python

python range()函数取反序遍历sequence的方法

2018/06/25 Python

Python正则表达式实现简易计算器功能示例

2019/05/07 Python

python语言time库和datetime库基本使用详解

2020/12/25 Python

英国最大的邮寄种子和植物公司：Thompson & Morgan

2017/09/21 全球购物

编写类String 的构造函数、析构函数和赋值函数

2012/09/09 面试题

英语专业毕业个人求职自荐信

2013/09/21 职场文书

优秀士兵个人事迹材料

2014/01/19 职场文书

大学生村官事迹材料

2014/01/21 职场文书

2014年流动人口工作总结

2014/11/26 职场文书

我的暑假生活作文（五年级）范文

2019/08/07 职场文书

Mysql数据库命令大全

2021/05/26 MySQL

Python Pandas pandas.read_sql函数实例用法

2021/06/21 Python

opencv用VS2013调试时用Image Watch插件查看图片

2021/07/26 Python

python运算符之与用户交互

2022/04/13 Python