你未必知道的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 相关文章推荐
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
js跳转页面方法总结
Jan 29 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
Bootstrap table使用方法总结
May 10 Javascript
微信小程序实现animation动画
Jan 26 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
详解Vue串联过滤器的使用场景
Apr 30 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
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Python读写/追加excel文件Demo分享
2018/05/03 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
村官学习十八大感想
2014/01/15 职场文书
初三学生个人自我评定
2014/04/06 职场文书
学历公证书范本
2014/04/09 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
女生抽烟检讨书
2014/10/05 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
实习推荐信格式模板
2015/03/27 职场文书
合理化建议书范文
2015/09/14 职场文书
创业计划书之农家乐
2019/10/09 职场文书