文档章节

盘点JavaScript和CSS交互的方法

kouxunli1
 kouxunli1
发布于 2014/12/03 09:51
字数 795
阅读 79
收藏 10

随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技 术,它们需要相互密切的合作。我们的网页中都有.js文件和.css文件,但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种 JavaScript和 CSS共同合作的方法!

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

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

JS和CSS交互

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

classList API

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

JS和CSS交互

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

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

JS和CSS交互

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

加载CSS文件

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

JS和CSS交互

CSS鼠标指针事件

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

JS和CSS交互

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

作为Web前端开发神器——WebStorm的智能化表现和可视化操作,大大的提供了前端开发的效率。慧都目前推出【正版IDE联合推广计划】和【在线购买优惠活动】WebStorm现在可以7折都买了,另外还有5折限时抢购


© 著作权归作者所有

kouxunli1
粉丝 24
博文 144
码字总数 59616
作品 0
九龙坡
架构师
私信 提问
5种你未必知道的JavaScript和CSS交互的方法

随着浏览器不断的升级改进,CSS和JavaScript之间 的界限越来越模糊。本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作。我们的网页中都有.js文件和...

oschina
2014/04/03
5.4K
20
在Android上实现Java和Js交互

其实webview加载资源的速度并不慢,但是如果资源多了,当然就很慢。图片、 css 、 js 、 html 这些资源每个大概需要 10-200ms ,一般都是 30ms 就 ok 了。不过webview是必须等到全部资源都完...

zhiweiofli
2013/06/20
0
0
2015 年开源前端框架盘点 TOP 20

2015年已经过去了,作为一个前端开发者,我觉得有必要把过去一年帮助过我或朋友们的优秀开源前端框架做个盘点,希望这些项目能够越来越好,帮助到更多的前端开发者们。 此榜单根据github上s...

wuhen147
2016/01/11
25K
34
2019 前端面试 | 知其然,并知其所以然

Web 前置知识 《老生常谈的从 URL 输入到页面展现背后发生的事》[编号:web01] 《初次接触前端,我们要理解哪些名词?》 《工欲善其事,必先利其器——软件安装、环境搭建》 《做一次山大王,...

itsOli
05/22
0
0
北京搜狐高薪招聘 JS前端架构师/Leader

北京搜狐为了构建一个重要的互联网产品, 打造一支精英化队伍, 特招聘有理想有抱负 的同学, 来实现我们共同的理想! 具体邮件联系 felixzhang@sohu-inc.com 咨询 msn: cloud@cnscud.com 薪水范...

飞云小侠
2011/09/13
1K
10

没有更多内容

加载失败,请刷新页面

加载更多

二进制位操作

单片机,或者一些模块的设置操作,都是由一个字节数据来完成,每位各有定义。就需进行位操作来组合需要的数字结果。 以JavaScript为例,编写位操作。 我们期望得到这样一个二进制数:0101101...

format
30分钟前
3
0
聊聊中国的通信行业:从“七国八制”到“中华”脊梁

本期文章和大家一起来聊一聊我曾经从事过的通信行业吧。最近各方面信息的泛滥,包括和华为的同学聊天,自己确实也感慨颇多。想想我自己本科主修通信工程,研究生再修信息与通信工程,从本科开...

CodeSheep
今天
6
0
MDK:ARM M451M:exceed the range of code meory, continue to erase or not?

问题: 代码空间超限 几天前就遇到:exceed the range of code meory, continue to erase or not? 如下所示: 解决过程 开始以为中MDK软件的128KB限制,如是就不能生成HEX文件,应该链接时有提...

SamXIAO
今天
1
1
OSChina 周六乱弹 —— 因违反《中华人民共和国治安管理处罚法》第四十四条之规定

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :#今日歌曲推荐# 惊艳分享谷微的单曲《安守本份》(@网易云音乐) 《安守本份》- 谷微 手机党少年们想听歌,请使劲儿戳(这里) ...

小小编辑
今天
574
12
Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部