如：elem.style.height 或者 elem.style.height = '100px', 这里要注意的是设置任何几何属性必须明确尺寸单位（如px），同时任何几何属性返回的是表示样式的字符串而非数值（如'100px'而非100）。另外像elem.style.height这样的操作，也能获取元素style属性中设置的样式值，如果你把样式统一放在css文件中，上述方法只会返回一个空串。为了获取元素真实、最终的样式，书中给出了一个函数 代码如下: //get a style property (name)...
动态载入 JavaScript/Csss 文件 传统加载外部JavaScript(*.js) 或者 Css(*.css)文件的方法是直接在标签里面进行添加: 代码如下: 这些文件用这种方式会同步加载到当前这个页面。 现在用动态的方式载入JavaScript/Css文件： 用 DOM createElement 方法创建一个 “script” 或者 ”link” 元素 设置相应的属性 使用 appendChild 方法, 把创建的元素插入到 head 标签的末尾 代码如下: function loadjscssfile(filename, filetyp...
query是一个javascript css selector engine，小巧而功能强大，压缩后2k左右，可以很轻松的集成到代码当中。支持浏览器 IE6+、Firefox、Chrome、Safari、Opera 选择器query(selector[,context]) div #intro div#intro .red span.red [name] [name=keywords] input[name] input[name=keywords] input[name=keywords] input[name=...
上篇博客说的是将div设置为居中显示，今天来分享一下如何将表格居中的显示。至于居中的原理就不说了，可以看一下我的上篇博客，这次没有使用window的两个事件，而是使用一个叫expression的函数。现在多数的浏览器都支持这个函数。在写上一篇博客的时候，我脑里想能不能把计算后的值赋给css的left和top属性呢？后来查阅资料找到了这个函数。这个函数用来把CSS属性和JavaScript表达式关联起来，这里的CSS属性可以是元素固有的属性，也...
1. 用media="print"的css来控制要打印的文件testPrint.html中引用media为print的样式，表示打印时该样式才起作用 代码如下: /style/print.css文件 代码如下: .noprint{display:none;} 在testPrint.html中使用print.css中的样式，在网页浏览的时候是看不出效果的，但是打印的时候会起作用，如下面这一段，加上noprint之后，在浏览器中仍然是现实的，但是打印的时候不显示： 代码如下: 当然print.css里面的样式你可以随便写...
随着浏览器不断的升级改进，CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能，但最终，它们都属于网页前端技术，它们需要相互密切的合作。我们的网页中都有.js文件和.css文件，但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道！ 用JavaScript获取伪元素(pseudo-element)属性 大家都知道如何通过一个元素的style属性获取它的CSS样式值，但能获取伪元素...
用过Arcgis的筒子们对于Arcmap里面的一个卷帘效果肯定记忆很深刻，想把它搬到自己的WebGIS系统中去，抱着同样的想法，我也对这种比较炫的卷帘效果做了一下研究，吼吼，出来了，给大家汇报一下成果 看到这样的效果，你是不是小鸡动了一下，嘿嘿，别急，听我慢慢道来。 首先，容器。分别用两个DIV来显示两个不同时期的影像。接下来设置两个容器的样式，代码：#after{ position: absolute; top: 0px; left: 0px; background-image...
用JavaScript获取伪元素(pseudo-element)属性 大家都知道如何通过一个元素的style属性获取它的CSS样式值，但能获取伪元素(pseudo-element)的属性值吗？可以的，使用JavaScript也可以访问页面中的伪元素。代码如下: // Get the color value of .element:before var color = window.getComputedStyle( document.querySelector(.element), :before ).getPropertyValue(color); // Get the content value of .element:before var conte...
1. viewport： 也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域， 这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个：代码如下: width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素） height - // viewport 的高度 （范围从223 到10,000）...
本文实例讲述了JavaScript+CSS实现仿天猫侧边网页菜单效果。分享给大家供大家参考。具体如下： 这是一款自己写的仿天猫的菜单效果，二级分类的功能已经实现，但没有美化，留着用的朋友自己完善吧，JS功能已经实现，鼠标移在主分类上，二级分类向右伸出展开，目前淘宝网、天猫购物、京东都在用的导航菜单特效，测试时候请先点击一下菜单，主菜单就显示出来了。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/...
本文实例讲述了JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果。分享给大家供大家参考。具体如下： 这里演示JavaScript+CSS仿Mootools竖排黑色动画菜单，并非使用了Mootools，但效果却和使用了Mootools差不多，动画效果平滑，操作舒服，给菜单增色不少。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-mootools-style-demo/ 具体代码如下：竖排黑色动画菜单#menu {height: auto;width: 350px;flo...
先来看一个简单的方法。 在 css 中定义两种样式 .odd{...} 和 .even{...} 分别用于奇数行和偶数行的不同背景颜色。在网页加载后通过 javascript 获取要变色的标签列表，执行如下代码：// 当文件加载时，执行代码。 window.onload = function() {// 获取对象var list = document.getElementById(list);// 获取list下面的所有livar items = list.getElementsByTagName(li);// 遍历itemsfor (var i = 0; i < items.length; i++) {var ...
本文实例讲述了JavaScript+CSS无限极分类效果完整实现方法。分享给大家供大家参考，具体如下： CSS样式：a {text-decoration:none;} a,a:visited {color:#000;background:inherit;} body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;} dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;} dd {margin:0 0 0 15px;} h4 {margin:0;padding:0;font-size:18px;text-align:center;} p {margin:0;padding:0 0 0 18px...
Grunt.js是基于Node.js的自动化任务运行器。Grunt.js结合NPM的包依赖管理，完全可以媲美Maven。Grunt.js天然适合前端应用程序的构建——不仅限于JavaScript项目，同样可以用于其他语言的应用程序构建。越来越多的JavaScript项目已经在使用Grunt，其中最大的使用者包括著名的jQuery项目。Grunt的生态系统在迅速的成长，目前已经有上百种插件发布在NPM上可供选择。同时，任何人都可以方便的发布自己的插件到NPM上供其他人使用。Grunt...
CSS 部分 首先随便新建一个用来做判断的类，然后通过 Media Queries 来对这个类的 z-index 属性赋予不同的值。这个类仅作为 JavaScript 读取使用，所以需要将其移出屏幕窗口，让浏览者不可见以免引起意外情况。 作为演示，下面代码设置了四种设备状态：桌面普通版、小屏幕桌面版、平板电脑版和手机版。/* default state */ .state-indicator {position: absolute;top: -999em;left: -999em;z-index: 1; }/* small desktop */ @medi...