你可能不知道的5种 CSS 和 JS 的交互方式
2014-03-20 19:21
435 查看
CSS和JavaScript: 在各个浏览器版本中的分界线似乎变得越来越模糊,两者所完成的功能差异非常明显,但说到底他们都是前端技术,所以确实需要紧密地配合。虽然我们将代码拆分到独立的 .js 文件和 .css 文件中,但他们之间还能进行一些更密切的交互,这些通常是普通JS框架所不支持的。
下面是你可能不知道的CSS和JS的交互的5种方式:
我们可以通过DOM元素的 style 属性获取基本的CSS样式值, 但怎么获取CSS伪元素属性呢? 确实,JavaScript提供了相应的API:
你可以查看作者的博客文章: Device State Detection, 如果你想创建动态,独特的网站那会非常有用。
在最受欢迎的JS框架中,我们可以使用 addClass , removeClass , 以及 toggleClass 方法来处理 class 列表. 为了兼容旧版本浏览器,每个框架都会先获取元素的 className属性(类型为String) 并添加/移除 相应的 class, 然后再更新 className 字符串. 现在,有一个新的API可以用来高效地 添加,删除,切换 class,名为 classList:
大多数浏览器支持 classList 已经好几年了,但是 IE 很杯具的在 10.0 版本才开始支持。
我们对于使用 element.style.propertyName 这种形式的方法修改样式都很熟悉,并可以通过 JavaScript 工具来处理,但你知道 怎样在新的和已存在的 stylesheets 中 读取和写入样式规则 吗? 这个API也是很简单的:
通常是使用此种方式来创建一个新的样式表,但如果你想修改一个现有的样式表也可以,快试试吧!
对图片, JSON,以及JS脚本的懒加载是减少页面显示时间的有效方法。我们可以通过 curl.js 或者 jQeury 库加载这些外部资源, 但你知道如何 懒加载样式表 并在加载完成后触发回调函数么?
本博客的原文 就使用懒加载 导入了 PrismJS,基于 pre 元素实现文字的高亮显示。在所有资源(包括css)加载完成后,会调用回调函数,这应该是很有用的。
CSS' pointer-events 属性扮演了一种类似 JavaScript 的方式, 如果 pointer-events 值为 none 则禁用某个元素,不为 none 则允许元素的常用功能。可能你会问: "这有什么用?" 好处是 pointer-events 能高效地阻止触发 JavaScript 事件.
在元素上的 click 以及通过 addEventListener 添加的回调函数都不会被触发。这真是一个完美的属性,真的 —— 你在回调函数中不需要先检测 className 以决定某些分支。
上面列举了CSS与Javascript交互的5种方式,还有更多的交互方式吗? 欢迎您进行分享!
原文链接: 5 Ways that CSS and JavaScript Interact That You May Not Know About
下面是你可能不知道的CSS和JS的交互的5种方式:
使用JavaScript获取CSS伪元素属性
我们可以通过DOM元素的 style 属性获取基本的CSS样式值, 但怎么获取CSS伪元素属性呢? 确实,JavaScript提供了相应的API:你可以查看作者的博客文章: Device State Detection, 如果你想创建动态,独特的网站那会非常有用。
classList API
在最受欢迎的JS框架中,我们可以使用 addClass , removeClass , 以及 toggleClass 方法来处理 class 列表. 为了兼容旧版本浏览器,每个框架都会先获取元素的 className属性(类型为String) 并添加/移除 相应的 class, 然后再更新 className 字符串. 现在,有一个新的API可以用来高效地 添加,删除,切换 class,名为 classList:大多数浏览器支持 classList 已经好几年了,但是 IE 很杯具的在 10.0 版本才开始支持。
直接操作样式表
我们对于使用 element.style.propertyName 这种形式的方法修改样式都很熟悉,并可以通过 JavaScript 工具来处理,但你知道 怎样在新的和已存在的 stylesheets 中 读取和写入样式规则 吗? 这个API也是很简单的:通常是使用此种方式来创建一个新的样式表,但如果你想修改一个现有的样式表也可以,快试试吧!
使用 Loader 加载 CSS 文件
对图片, JSON,以及JS脚本的懒加载是减少页面显示时间的有效方法。我们可以通过 curl.js 或者 jQeury 库加载这些外部资源, 但你知道如何 懒加载样式表 并在加载完成后触发回调函数么?本博客的原文 就使用懒加载 导入了 PrismJS,基于 pre 元素实现文字的高亮显示。在所有资源(包括css)加载完成后,会调用回调函数,这应该是很有用的。
CSS 的 pointer-events 属性
CSS' pointer-events 属性扮演了一种类似 JavaScript 的方式, 如果 pointer-events 值为 none 则禁用某个元素,不为 none 则允许元素的常用功能。可能你会问: "这有什么用?" 好处是 pointer-events 能高效地阻止触发 JavaScript 事件.上面列举了CSS与Javascript交互的5种方式,还有更多的交互方式吗? 欢迎您进行分享!
原文链接: 5 Ways that CSS and JavaScript Interact That You May Not Know About
相关文章推荐
- 你可能不知道的5种 CSS 和 JS 的交互方式
- 你可能不知道的5种 CSS 和 JS 的交互方式
- 你可能不知道的5种 CSS 和 JS 的交互方式
- 你可能不知道的5种 CSS 和 JS 的交互方式
- 你可能不知道的5种 CSS 和 JS 的交互方式
- 你可能不知道的5中CSS和JS的交互方式
- 五种js和css交互的方式
- 你可能还不知道的:CSS和SEO相关参考好文章
- 干货汇总 | 你可能不知道的 Python Web 部署方式总结
- CSS中你可能不知道的单位
- 使用js和css方式,让IE8,IE9支持部分css3,html5
- CSS全屏布局的5种方式
- Android:你要的WebView与 JS 交互方式 都在这里了
- 关于uiwebview或者网站可能出现的缓存js,css问题
- React.js入门实例教程之创建hello world 的5种方式
- JS修改CSS的三种方式
- js实现继承的5种方式
- js实现继承的5种方式
- [置顶] js继承有5种实现方式,你知道几种?
- 关于使用struts2跳转后css和js失效的解决方式