JavaScript和CSS交互的方法汇总


Posted in Javascript onDecember 02, 2014

用JavaScript获取伪元素(pseudo-element)属性

大家都知道如何通过一个元素的style属性获取它的CSS样式值,但能获取伪元素(pseudo-element)的属性值吗?可以的,使用JavaScript也可以访问页面中的伪元素。

// 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');

看见了吗,我能访问伪元素里的content属性值。如果你想创建一个动态的,风格别致的网站,这是一种非常有用的技术!

classList API

很多的JavaScript工具库里都有addClass,removeClass和toggleClass等方法。为了对老式浏览器的兼容,这些类库采用的方法都是先搜索元素的className,追加和删除这个类,然后更新className。其实有一个新型的API提供了添加,删除和反转CSS类属性的方法,叫做classList:

myDiv.classList.add('myCssClass'); // Adds a class

myDiv.classList.remove('myCssClass'); // Removes a class

myDiv.classList.toggle('myCssClass'); // Toggles a class

大多数的浏览器里很早就实现了classListAPI,而且最终IE10里也实现了它。

直接对样式表进行添加和删除样式规则

我们都非常熟悉使用element.style.propertyName来修改样式,使用JavaScript能帮助我们做到这些,但你知道如何新增或修一个现有的CSS样式规则吗?其实非常的简单。

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");

这种方法通常是用来创建一个新的样式规则,但如果你想修改一个现有的规则,也可以这样做。

加载CSS文件

延迟加载图片、JSON、脚本等是用来加快页面显示速度的好方法。我们可以使用curl.js等这样JavaScript加载器来延迟加载这些外部资源,可你知道CSS样式表也可以延迟加载吗,而且在加载成功后回调函数会给予通知。

curl(

[

"namespace/MyWidget",

"css!namespace/resources/MyWidget.css"

], 

function(MyWidget) {

// 你可以对MyWidget进行操作

// 这里没有对这个CSS文件引用,因为不需要;

// 我们只需要它已经加载到页面上了

}

});

本网站使用的PrismJS语法高亮脚本就是延迟加载的。当所有的资源都加载后,回调函数就会触发,我可在回调函数里加载它。非常有用!

CSS鼠标指针事件

CSS鼠标指针事件pointer-events属性非常的有趣,它的功效非常像JavaScript,当你把这个属性设置为none时,它能有效的阻止禁止这个元素,你也许会说“这又如何?”,但事实上,它是禁止了这个元素上的任何JavaScript事件或回调函数!

.disabled { pointer-events: none; }

点击这个元素,你会发现任何你放置在这个元素上的监听器都不会触发任何事件。一个神奇的功能,真的——你不在需要为了防止某个事件会被触发而去检查某个css类是否存在。

以上就是个人总结的5种javascript和CSS进行交互的方法,大家如果有更好的,请告之,本文将持续更新

Javascript 相关文章推荐
jQuery ui 1.7更新小结
Aug 15 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
layui实现动态和静态分页
Apr 28 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
vue实现匀速轮播效果
Jun 29 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
HTML,CSS,JavaScript速查表推荐
Dec 02 #Javascript
javascript函数声明和函数表达式区别分析
Dec 02 #Javascript
javascript常用方法汇总
Dec 02 #Javascript
js时间日期格式化封装函数
Dec 02 #Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 #Javascript
JavaScript基础知识学习笔记
Dec 02 #Javascript
Js 正则表达式知识汇总
Dec 02 #Javascript
You might like
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
php中$this->含义分析
2009/11/29 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
JavaScript之数组扁平化详解
2019/06/03 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
python中requests模块的使用方法
2015/04/08 Python
python list元素为tuple时的排序方法
2018/04/18 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
python+flask实现API的方法
2018/11/21 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书