关闭

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

标签: CSSJavascript交互pointer-events
8889人阅读 评论(5) 收藏 举报
分类:
翻译人员: 铁锚
翻译日期: 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种方式,还有更多的交互方式吗? 欢迎您进行分享!
12
0
查看评论

关于addRule的用法

import android.os.Bundle; import android.app.Activity; import android.graphics.Color; import android.view.Menu; import android.view.ViewGroup.LayoutPa...
  • u011057161
  • u011057161
  • 2014-05-05 21:57
  • 3680

使用JavaScript动态添加CSS样式规则

动态添加规则到样式表是高效的手段,可能比你想象的还要简单。请记住这种方案,可能在你的下一个大应用中需要使用,因为它能在代码和元素处理这两方面避免你掉进坑里。
  • renfufei
  • renfufei
  • 2014-09-05 21:20
  • 22168

Android与HTML+JS交互入门

在Android开发中,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的javascript进行交互,Android也对交互做了很好的封装,所以很容易实现例如:点击网页中的按钮Andr...
  • leejizhou
  • leejizhou
  • 2016-03-15 13:01
  • 38046

JS和原生交互原理浅析

Java实现原理研究 参照Android:WebView与Javascript交互(相互调用参数、传值)http://itfish.net/article/25514.html 研究了安卓java的功能接口代码,上述地址先在Activity(java源生和js之间类似与桥梁的文件...
  • qq_20334295
  • qq_20334295
  • 2017-01-10 15:18
  • 2120

30个酷毙的交互式网站(HTML5+CSS3)

HTML5,CSS3,还有Javascript 让很多绚丽的设计效果得以展示。现在的网页设计是可以很有交互性的,已经不再被静态布局给限制住了。下面列出的这30个网站就是个很不错的证明,它通过诸如音频和视频让传统效果变得酷炫。开始欣赏吧!
  • wowkk
  • wowkk
  • 2013-10-11 00:05
  • 149263

HTML,CSS和JavaScript对比(一)

HTML,CSS和JavaScript对比(一) 目录 前言: 一,各自代码片段     1, HTML 编辑网页     2,CSS.      3,JavaScript. 二:各自的角色 ...
  • u013067756
  • u013067756
  • 2016-01-26 16:32
  • 930

Html,Javascript,Css是什么?

Html,JavaScript,CSS是什么?         HTML(Hypertext Markup Language)。HTML是一种规范,一种标准,他通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符...
  • haiyan_cf
  • haiyan_cf
  • 2014-03-27 19:03
  • 2450

JS如何调用CSS样式表

JS1: head=document.getElementsByTagName("head"); function js_on(){ var js=document.createElement("script"); js.type="text/ja...
  • u010964869
  • u010964869
  • 2016-09-28 15:50
  • 1356

css及js调用方法

信息汇总自互联网:   css调用方法: 1. 链接样式表 同样是添加在HTML的头信息标识符里     2. 添加在HTML的头信息标识符里     3. 使用style属性对标签加载样式 使用cs...
  • zurich1979
  • zurich1979
  • 2014-05-08 08:50
  • 3585

关于在JavaScript调用css的两种方式

代码示例如下: =================================               鼠标的悬停及移出事件 .one{ color:red ; border:6px solid green...
  • u010661782
  • u010661782
  • 2015-10-10 10:59
  • 960
    博客专栏
    个人资料
    • 访问:3978949次
    • 积分:20859
    • 等级:
    • 排名:第458名
    • 原创:103篇
    • 转载:1篇
    • 译文:175篇
    • 评论:678条
    Google搜索该博客
    有问题?加入开源技术交流群
    有需要,qq联系我