5种CSS和JS的交互方式资源-CSDN文库

需积分: 9 112 浏览量 2014-07-16 17:32:44 上传评论收藏 42KB DOCX 举报

资源推荐

资源详情

资源评论



你可能不知道的

5

种

CSS

和

JS

的交互方式

分类： HTML5_前端 2014-01-22 16:361256 人阅读评论(4)收藏举报

CSSJavascript 交互 pointer-events

翻译人员: 铁锚

翻译日期: 2014 年 01 月 22 日

原文日期: 2014 年 01 月 20 日

原文链接: 5 Ways that CSS and JavaScript Interact That You May Not KnowAbout

CSS 和 JavaScript: 在各个浏览器版本中的分界线似乎变得越来越模糊.

两者所完成的功能差异非常明显,但说到底他们都是前端技术,所以确实需要紧密地配合。

虽然我们将代码拆分到独立的 .js 文件和 .css 文件中,但他们之间还能进行一些更密切的交

互,这些通常是普通 JS 框架所不支持的.

下面是你可能不知道的 CSS 和 JS 的交互的 5 种方式:

使用 JavaScript 获取 CSS 伪元素属性

我们可以通过 DOM 元素的 style 属性获取基本的 CSS 样式值, 但怎么获取 CSS 伪元素属

性呢? 确实，JavaScript 提供了相应的 API:

[javascript]view plaincopy

1. //获取 .element:before的 color值

2. varcolor=window.getComputedStyle(

3. document.querySelector('.element'),':before'

4. ).getPropertyValue('color');

5. 

6. 

7. //获取 .element:before的 content值

8. varcontent=window.getComputedStyle(

9. document.querySelector('.element'),':before'

10. ).getPropertyValue('content');

你可以查看作者的博客文章:Device State Detection, 如果你想创建动态,独特的网站那会

非常有用.

classList API

在最受欢迎的 JS 框架中,我们可以使用 addClass , removeClass , 以及 toggleClass 方法

来处理 class 列表. 为了兼容旧版本浏览器,每个框架都会先获取元素的 className 属性(类

型为 String) 并添加/移除相应的 class, 然后再更新 className 字符串. 现在,有一个新的

API 可以用来高效地添加,删除,切换 class,名为 classList:

[javascript]view plaincopy

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

内容反馈

fengYangxiada

粉丝: 1
资源: 8

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip