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

关于IE7 IE8弹出窗口顶上

Dec 22 Javascript

JavaScript中__proto__与prototype的关系深入理解

Dec 04 Javascript

JavaScript数组深拷贝和浅拷贝的两种方法

Apr 16 Javascript

jquery删除指定子元素代码实例

Jan 13 Javascript

jQuery在页面加载时动态修改图片尺寸的方法

Mar 20 Javascript

JavaScript实现自动生成网页元素功能（按钮、文本等）

Nov 21 Javascript

用jQuery向div中添加Html文本内容的简单实现

Jul 13 Javascript

JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)

Sep 05 Javascript

使用Promise链式调用解决多个异步回调的问题

Jan 15 Javascript

Javascript 链式作用域详细介绍

Feb 23 Javascript

vuex state中的数组变化监听实例

Nov 06 Javascript

如何基于JS截获动态代码

Dec 25 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_Flame(Version:Progress)的原代码

2006/10/09 PHP

PHP缩略图生成和图片水印制作

2017/01/07 PHP

THINKPHP截取中文字符串函数实例代码

2017/03/20 PHP

yii2中dropDownList实现二级和三级联动写法

2017/04/26 PHP

PHP fclose函数用法总结

2019/02/15 PHP

php面向对象重点知识分享

2019/09/27 PHP

jQuery实现点击该行即可删除HTML表格行

2014/10/17 Javascript

javascript实现依次输入input自动定焦

2014/12/23 Javascript

jquery插件unobtrusive实现片段式加载

2015/06/15 Javascript

Jquery实现纵向横向菜单

2016/01/24 Javascript

Es6 写的文件import 起来解决方案详解

2016/12/13 Javascript

详解vue-cli快速构建项目以及引入bootstrap、jq

2017/05/26 Javascript

JS闭包的几种常见形式实例详解

2017/09/16 Javascript

浅谈Angular路由复用策略

2017/10/04 Javascript

arcgis for js栅格图层叠加(Raster Layer)问题

2017/11/22 Javascript

vue 动态修改a标签的样式的方法

2018/01/18 Javascript

用vscode开发vue应用的方法步骤

2019/05/06 Javascript

小程序组件之自定义顶部导航实例

2019/06/12 Javascript

Vue项目中使用jsonp抓取跨域数据的方法

2019/11/10 Javascript

Python中集合的内建函数和内建方法学习教程

2015/08/19 Python

Python进阶-函数默认参数(详解)

2017/05/18 Python

python自定义异常实例详解

2017/07/11 Python

django中瀑布流写法实例代码

2019/10/14 Python

Web页面中八种创建多列等高(等高列布局)的实现技术

2012/12/24 HTML / CSS

html5指南-1.html5全局属性(html5 global attributes)深入理解

2013/01/07 HTML / CSS

Ryderwear美国官网：澳大利亚高端健身训练装备品牌

2018/04/24 全球购物

Mountain Warehouse德国官网：英国户外零售商

2019/08/11 全球购物

早晨薰衣草在线女性精品店：Morning Lavender

2021/01/04 全球购物

入党转预备思想汇报

2014/01/07 职场文书

房屋改造计划书

2014/01/10 职场文书

我爱我家教学反思

2014/05/01 职场文书

学习实践科学发展观心得体会

2014/09/10 职场文书

教师个人教学总结

2015/02/11 职场文书

三方合作意向书范本

2015/05/09 职场文书

党组织结对共建协议书

2016/03/23 职场文书

SpringBoot快速入门详解

2021/07/21 Java/Android