你未必知道的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 call 函数的用法说明
Apr 09 Javascript
chrome原生方法之数组
Nov 30 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
js实现图片360度旋转
Jan 22 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
JS原型与继承操作示例
May 09 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 版本]
2007/03/20 PHP
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
JS实现多选框的操作
2020/06/24 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
python爬虫使用cookie登录详解
2017/12/27 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
在职研究生自我鉴定
2013/10/16 职场文书
活动志愿者自荐信
2014/01/27 职场文书
电台实习生求职信
2014/02/25 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
党支部特色活动方案
2014/08/20 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
2016新年感言
2015/08/03 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS