开发者社区> 铁锚> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

你可能不知道的5种 CSS 和 JS 的交互方式

简介: 翻译人员: 铁锚 翻译日期: 2014年01月22日 原文日期: 2014年01月20日 原文链接:  5 Ways that CSS and JavaScript Interact That You May Not Know About CSS和JavaScript: 在各个浏览器版本中的分界线似乎变得越来越模糊. 两者所完成的功能差异非常明显,但说到底他们都是前端技术,所以确实需要紧密地配合。
+关注继续查看
翻译人员: 铁锚
翻译日期: 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:
// 获取 .element:before 的 color 值
var color = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('color');


// 获取 .element:before 的 content 值
var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');

你可以查看作者的博客文章: Device State Detection, 如果你想创建动态,独特的网站那会非常有用.
classList API
在最受欢迎的JS框架中,我们可以使用 addClass , removeClass , 以及 toggleClass 方法来处理 class 列表. 为了兼容旧版本浏览器,每个框架都会先获取元素的 className属性(类型为String) 并添加/移除 相应的 class, 然后再更新 className 字符串. 现在,有一个新的API可以用来高效地 添加,删除,切换 class,名为 classList:
myDiv.classList.add('myCssClass'); // 添加 class
myDiv.classList.remove('myCssClass'); // 移除 class
myDiv.classList.toggle('myCssClass'); // 切换 class
大多数浏览器支持 classList 已经好几年了,但是 IE 很杯具的在 10.0 版本才开始支持.
直接操作样式表
我们对于使用 element.style.propertyName 这种形式的方法修改样式都很熟悉, 并可以通过 JavaScript 工具来处理,但你知道 怎样在新的和已存在的 stylesheets 中 读取和写入样式规则 吗? 这个API也是很简单的:
function addCSSRule(sheet, selector, rules, index) {
    // 注意 sheet 的新 API 
    if(sheet.insertRule) {
        sheet.insertRule(selector + "{" + rules + "}", index);
    }
    else {
        sheet.addRule(selector, rules, index);
    }
}


// 调用!
addCSSRule(document.styleSheets[0], "header", "float: left");
通常是使用此种方式来创建一个新的样式表,但如果你想修改一个现有的样式表也可以,快试试吧!
使用 Loader 加载 CSS 文件
对图片, JSON,以及JS脚本的懒加载是减少页面显示时间的有效方法. 我们可以通过 curl.js 或者 jQeury 库加载这些外部资源, 但你知道如何 懒加载样式表 并在加载完成后触发回调函数么?
curl(
    [
        "namespace/MyWidget",
        "css!namespace/resources/MyWidget.css"
    ], 
    function(MyWidget) {
        // 使用 MyWidget 进行
        // The CSS reference isn't in the signature because we don't care about it;
        // we just care that it is now in the page
    }
});
本博客的 原文 就使用懒加载 导入了 PrismJS,基于 pre 元素实现文字的高亮显示. 在所有资源(包括css)加载完成后,会调用回调函数,这应该是很有用的.

CSS 的 pointer-events 属性
CSS' pointer-events 属性扮演了一种类似 JavaScript 的方式, 如果 pointer-events 值为 none 则禁用某个元素,不为 none 则允许元素的常用功能. 可能你会问: "这有什么用?" 好处是 pointer-events 能高效地阻止触发 JavaScript 事件.
.disabled { pointer-events: none; }
在元素上的 click 以及通过 addEventListener 添加的回调函数都不会被触发. 这真是一个完美的属性,真的 —— 你在回调函数中不需要先检测 className  以决定某些分支.
上面列举了CSS与Javascript交互的5种方式,还有更多的交互方式吗? 欢迎您进行分享!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
看懂这5幅图,研发效能分析和改进就容易了
作为 CTO 或企业管理者,我们如何去了解和衡量研发团队的研发效能呢?作为 PMO 和效能负责人,我们该从哪几个维度来回答关于研发效能的问题呢?如何通过效能数据分析,帮助企业管理者透明化研发效能水平和变化趋势,分析效能问题根因、指导改进行动、衡量改进效果。
650 0
这可能是最牛逼的 Java 权限框架了。。
给大家推荐的这个开源项目超级棒,可能是史上功能最全的 Java 权限认证框架!
61 0
Java并发基石CAS原理以及ABA问题
在学习CAS之前,先从一个简单的案例入手,进而引出CAS的基本使用
37 0
如何实现Coupa PunchOut ,如何的实现通过CXML交互?
如何实现Coupa PunchOut ,如何的实现通过CXML交互?
240 0
2021 年你可能不知道的 CSS 特性 (上)
前几天在 淘系前端午夜识堂和大家聊了一下 CSS 方面的话题,即 CSS 新特性。在这个话题中主要整理了有关于 CSS 方面的特性,并且尽可能的整理了一些大家现在能用或过不了多久就能用的属性。另外,虽然标题是“新特性”,但其中有蛮多特性并不是“新”,可能已经出现在你的项目中,或者你已经看过,只是不了解而以。接下来,就和大家一起来简单地回顾一下这些性,希望大家能喜欢,也希望对大家平时工作有所帮助。
87 0
研发效能提升 36 计第三课:束水攻沙,持续加快产品交付速度
没有度量的改进就是盲人骑瞎马,夜半临深池。好的度量,必须直指本质,并指导行为改变。本次课程,是研发效能提升 36 计系列课程第三课,两位讲师将介绍一套行之有效的研发效能的度量指标,帮助团队设定研发效能改进的愿景和目标;通过有效反馈,持续提升研发效能。
10520 0
第201天:js---实现继承的5种方式
一、构造函数方式 1 //构造函数 2 function People(){ 3 this.race = '汉族'; 4 } 5 People.prototype={ 6 eat:function(){ 7 console.
949 0
西安宸悦零距离体验互联网+代账
本文讲的是西安宸悦零距离体验互联网+代账,每个企业都需要报税,都需要和工商、税务、银行等打交道,作为专门为企业提供财务和税务服务的代理记账行业,对规范小微企业行为、促进企业健康长久发展的作用日益凸显。
1756 0
转载:js和as间的交互
转载一: 提及AS3与外部脚本的交互,笔者认为可以总结成两种。一是AS3调用外部函数,二是外部脚本调用AS3函数。无外乎就 这两种。在调用函数的同时,我们还可以向函数传递一些参数。这就达到了传递数据的目的。
1028 0
+关注
铁锚
Java与数据库开发
271
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载