你未必知道的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 相关文章推荐
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
JS简单计算器实例
Jan 20 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
JavaScript 对象创建的3种方法
Nov 17 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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打开文件fopen函数的使用说明
2013/07/05 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
python遍历类中所有成员的方法
2015/03/18 Python
Python编程之多态用法实例详解
2015/05/19 Python
总结Python编程中函数的使用要点
2016/03/20 Python
pandas值替换方法
2018/07/10 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
介绍一下mysql的日期和时间函数
2013/03/28 面试题
校园歌手大赛策划书
2014/01/17 职场文书
初级党校心得体会
2014/09/11 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
Nginx反向代理学习实例教程
2021/10/24 Servers