你未必知道的JavaScript和CSS交互的5种方法


Posted in Javascript onApril 02, 2014

随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作。我们的网页中都有.js文件和.css文件,但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道!

用JavaScript获取伪元素(pseudo-element)属性

大家都知道如何通过一个元素的style属性获取它的CSS样式值,但能获取伪元素(pseudo-element)的属性值吗?可以的,使用JavaScript也可以访问页面中的伪元素。

<span style="font-size:18px;">// 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 content = window.getComputedStyle( 
document.querySelector('.element'), ':before' 
).getPropertyValue('content');</span>

看见了吗,我能访问伪元素里的content属性值。如果你想创建一个动态的,风格别致的网站,这是一种非常有用的技术!

classList API

很多的JavaScript工具库里都有addClass,removeClass和toggleClass等方法。为了对老式浏览器的兼容,这些类库采用的方法都是先搜索元素的className,追加和删除这个类,然后更新className。其实有一个新型的API提供了添加,删除和反转CSS类属性的方法,叫做classList:

<span style="font-size:18px;">myDiv.classList.add('myCssClass'); // Adds a class 
myDiv.classList.remove('myCssClass'); // Removes a class 
myDiv.classList.toggle('myCssClass'); // Toggles a class</span>

大多数的浏览器里很早就实现了classListAPI,而且最终IE10里也实现了它。

直接对样式表进行添加和删除样式规则

我们都非常熟悉使用element.style.propertyName来修改样式,使用JavaScript能帮助我们做到这些,但你知道如何新增或修一个现有的CSS样式规则吗?其实非常的简单。

<span style="font-size:18px;">function addCSSRule(sheet, selector, rules, index) { 
if(sheet.insertRule) { 
sheet.insertRule(selector + "{" + rules + "}", index); 
} 
else { 
sheet.addRule(selector, rules, index); 
} 
} 
// Use it! 
addCSSRule(document.styleSheets[0], "header", "float: left"); 
</span>

这种方法通常是用来创建一个新的样式规则,但如果你想修改一个现有的规则,也可以这样做。

加载CSS文件

延迟加载图片、JSON、脚本等是用来加快页面显示速度的好方法。我们可以使用curl.js等这样JavaScript加载器来延迟加载这些外部资源,可你知道CSS样式表也可以延迟加载吗,而且在加载成功后回调函数会给予通知。

<span style="font-size:18px;">curl( 
[ 
"namespace/MyWidget", 
"css!namespace/resources/MyWidget.css" 
], 
function(MyWidget) { 
// 你可以对MyWidget进行操作 
// 这里没有对这个CSS文件引用,因为不需要; 
// 我们只需要它已经加载到页面上了 
} 
});</span>

当所有的资源都加载后,回调函数就会触发,我可在回调函数里加载它。非常有用!

CSS鼠标指针事件

CSS鼠标指针事件pointer-events属性非常的有趣,它的功效非常像JavaScript,当你把这个属性设置为none时,它能有效的阻止禁止这个元素,你也许会说“这又如何?”,但事实上,它是禁止了这个元素上的任何JavaScript事件或回调函数!

<span style="font-size:18px;">.disabled { pointer-events: none; }</span>

点击这个元素,你会发现任何你放置在这个元素上的监听器都不会触发任何事件。一个神奇的功能,真的——你不在需要为了防止某个事件会被触发而去检查某个css类是否存在。

就是这5给你也许还没有发现的CSS和JavaScript交互的方法。你还有新的发现吗?分享出来!

Javascript 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
checkbox勾选判断代码分析
Jun 11 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
网页广告中JS代码的信息监听示例
Apr 02 #Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 #Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 #Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 #Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 #Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 #Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 #Javascript
You might like
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
Python中itertools模块用法详解
2014/09/25 Python
在Python中使用模块的教程
2015/04/27 Python
python在控制台输出进度条的方法
2015/06/20 Python
Python中的id()函数指的什么
2017/10/17 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
工商管理专业应届生求职信
2013/11/04 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
项目总经理岗位职责
2014/02/14 职场文书
法制宣传标语
2014/06/23 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
图解上海144收音机
2021/04/22 无线电
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
js 实现验证码输入框示例详解
2022/09/23 Javascript