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 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
vue中destroyed方法的使用说明
Jul 21 Javascript
8个非常实用的Vue自定义指令
Dec 15 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
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
京东优选小程序的实现代码示例
2020/02/25 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Python函数中定义参数的四种方式
2014/11/30 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
表彰大会主持词
2014/03/26 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
教师节演讲稿
2014/05/06 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
2014中考励志标语
2014/06/05 职场文书
应届毕业生自荐书
2014/06/18 职场文书
新学期开学标语
2014/06/30 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
HTML基本元素标签介绍
2022/02/28 HTML / CSS
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers