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

解决使用attachEvent函数时，this指向被绑定的元素的问题的方法

Aug 13 Javascript

jquery 插件开发 extjs中的extend用法小结

Jan 04 Javascript

jQuery入门介绍之基础知识

Jan 13 Javascript

jQuery版AJAX简易封装代码

Sep 14 Javascript

AngularJS入门教程之表单校验用法示例

Nov 02 Javascript

如何正确理解javascript的模块化

Mar 02 Javascript

vue给input file绑定函数获取当前上传的对象完美实现方法

Dec 15 Javascript

JavaScript判断变量名是否存在数组中的实例

Dec 28 Javascript

vue 简单自动补全的输入框的示例

Mar 12 Javascript

Express本地测试HTTPS的示例代码

Jun 06 Javascript

vue2.0移动端滑动事件vue-touch的实例代码

Nov 27 Javascript

vue.js实现照片放大功能

Jun 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

PHP关于htmlspecialchars、strip_tags、addslashes的解释

2014/07/04 PHP

JavaScript实现滚动栏效果的方法

2015/04/27 PHP

Linux系统下使用XHProf和XHGui分析PHP运行性能

2015/12/08 PHP

jquery+thinkphp实现跨域抓取数据的方法

2016/10/15 PHP

CodeIgniter整合Smarty的方法详解

2017/08/25 PHP

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例

2017/09/15 PHP

PHP基于openssl实现非对称加密代码实例

2020/06/19 PHP

JS修改css样式style浅谈

2013/05/06 Javascript

js菜单点击显示或隐藏效果的简单实例

2014/01/13 Javascript

Web前端新人笔记之jquery入门心得(新手必看)

2016/05/17 Javascript

jQuery File Upload文件上传插件使用详解

2016/12/06 Javascript

js实现做通讯录的索引滑动显示效果和滑动显示锚点效果

2017/02/18 Javascript

vue实现图片加载完成前的loading组件方法

2018/02/05 Javascript

微信小程序实现换肤功能

2018/03/14 Javascript

JS中双击和单击事件冲突的解决方法

2018/04/09 Javascript

nodejs中express入门和基础知识点学习

2018/09/13 NodeJs

vuex存储token示例

2019/11/11 Javascript

JS实现数据动态渲染的竖向步骤条

2020/06/24 Javascript

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

2020/07/21 Javascript

python登录pop3邮件服务器接收邮件的方法

2015/04/30 Python

Python编程argparse入门浅析

2018/02/07 Python

python同时遍历数组的索引和值的实例

2018/11/15 Python

python调用自定义函数的实例操作

2019/06/26 Python

Python使用mongodb保存爬取豆瓣电影的数据过程解析

2019/08/14 Python

numpy中三维数组中加入元素后的位置详解

2019/11/28 Python

AJAX都有哪些有点和缺点

2012/11/03 面试题

小学美术教学反思

2014/02/01 职场文书

入党自我评价范文

2014/02/02 职场文书

行政文秘岗位职责范本

2014/02/10 职场文书

社团活动总结范文

2014/04/26 职场文书

《陈毅探母》教学反思

2014/05/01 职场文书

酒店爱岗敬业演讲稿

2014/09/02 职场文书

导游词范文

2015/02/13 职场文书

2015毕业生简历自我评价

2015/03/02 职场文书

2016公司中秋节寄语

2015/12/07 职场文书

Win11开始菜单添加休眠选项

2022/04/19 数码科技