你未必知道的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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
uniapp实现可滑动选项卡
Oct 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 dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
PHP二维数组去重算法
2016/12/17 PHP
Smarty3配置及入门语法
2017/02/22 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
利用Python命令行传递实例化对象的方法
2016/11/02 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
pytorch梯度剪裁方式
2020/02/04 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
函授大学生自我鉴定
2014/02/05 职场文书
中层干部考核评语
2015/01/04 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python