你未必知道的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 相关文章推荐
javascript Array对象基础知识小结
Nov 16 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
浅谈JavaScript字符集
May 22 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
vue-router 路由传参用法实例分析
Mar 06 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
网页广告中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获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
测试php函数的方法
2013/11/13 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
jquery插件开发注意事项小结
2013/06/04 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
python求斐波那契数列示例分享
2014/02/14 Python
python端口扫描系统实现方法
2014/11/19 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
Python实现搜索算法的实例代码
2020/01/02 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
Python 如何批量更新已安装的库
2020/05/26 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
学习型班组申报材料
2014/05/31 职场文书
森林防火宣传标语
2014/06/27 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
学前班语言教学计划
2015/01/20 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书