你未必知道的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 prototype 原型链
Mar 12 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 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+js实现异步图片上传实例分享
2014/06/02 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
javascript引用对象的方法代码
2007/08/13 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
简单介绍Ruby中的CGI编程
2015/04/10 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
利用python爬取有道词典的方法
2020/12/08 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
致100米运动员广播稿
2014/02/14 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
Python可视化学习之seaborn调色盘
2022/02/24 Python
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers