用JavaScript获取伪元素(pseudo-element)属性
大家都知道如何通过一个元素的style
属性获取它的CSS样式值,但能获取伪元素(pseudo-element)的属性值吗?可以的,使用JavaScript也可以访问页面中的伪元素。
2 |
var color = window.getComputedStyle(
|
3 |
document.querySelector(& #039;.element'), ':before'
|
4 |
).getPropertyValue(& #039;color');
|
7 |
var content = window.getComputedStyle(
|
8 |
document.querySelector(& #039;.element'), ':before'
|
9 |
).getPropertyValue(& #039;content');
|
看见了吗,我能访问伪元素里的content
属性值。如果你想创建一个动态的,风格别致的网站,这是一种非常有用的技术!
classList API
很多的JavaScript工具库里都有addClass
,removeClass
和toggleClass
等方法。为了对老式浏览器的兼容,这些类库采用的方法都是先搜索元素的className
,追加和删除这个类,然后更新className
。其实有一个新型的API提供了添加,删除和反转CSS类属性的方法,叫做classList:
1 |
myDiv.classList.add(& #039;myCssClass'); // Adds a class
|
3 |
myDiv.classList.remove(& #039;myCssClass'); // Removes a class
|
5 |
myDiv.classList.toggle(& #039;myCssClass'); // Toggles a class
|
大多数的浏览器里很早就实现了classList
API,而且最终IE10里也实现了它。
直接对样式表进行添加和删除样式规则
我们都非常熟悉使用element.style.propertyName
来修改样式,使用JavaScript能帮助我们做到这些,但你知道如何新增或修一个现有的CSS样式规则吗?其实非常的简单。
01 |
function addCSSRule(sheet, selector, rules, index) {
|
02 |
if (sheet.insertRule) {
|
03 |
sheet.insertRule(selector + "{" + rules + "}" , index);
|
06 |
sheet.addRule(selector, rules, index);
|
11 |
addCSSRule(document.styleSheets[0], "header" , "float: left" );
|
这种方法通常是用来创建一个新的样式规则,但如果你想修改一个现有的规则,也可以这样做。
加载CSS文件
延迟加载图片、JSON、脚本等是用来加快页面显示速度的好方法。我们可以使用curl.js等这样JavaScript加载器来延迟加载这些外部资源,可你知道CSS样式表也可以延迟加载吗,而且在加载成功后回调函数会给予通知。
04 |
"css!namespace/resources/MyWidget.css"
|
本网站使用的PrismJS语法高亮脚本就是延迟加载的。当所有的资源都加载后,回调函数就会触发,我可在回调函数里加载它。非常有用!
CSS鼠标指针事件
CSS鼠标指针事件pointer-events
属性非常的有趣,它的功效非常像JavaScript,当你把这个属性设置为none
时,它能有效的阻止禁止这个元素,你也许会说“这又如何?”,但事实上,它是禁止了这个元素上的任何JavaScript事件或回调函数!
1 |
.disabled { pointer-events: none; } |
点击这个元素,你会发现任何你放置在这个元素上的{敏感词}都不会触发任何事件。一个神奇的功能,真的——你不在需要为了防止某个事件会被触发而去检查某个css类是否存在。
就是这5给你也许还没有发现的CSS和JavaScript交互的方法。你还有新的发现吗?分享出来!
分享到:
相关推荐
下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道! 用JavaScript获取伪元素(pseudo-element)属性 大家都知道如何通过一个元素的style属性获取它的CSS样式值,但能获取伪元素(pseudo-element)的属性值...
标题中的“5种CSS和JS的交互方式”指的是在网页开发中,JavaScript与CSS之间进行交互的五种方法。这些方法让开发者能够更好地控制页面的动态表现和交互性。描述中提到的“使用JavaScript获取CSS伪元素属性”和“使用...
3. **JavaScript**:JavaScript是一种动态编程语言,用于实现网页的交互性和动态功能。它可以在用户的浏览器上运行,无需服务器交互。基础概念包括变量、数据类型、函数、条件语句和循环。JavaScript与DOM(Document...
本项目“HTML5+JavaScript+CSS 商城(模拟联想)购物系统”充分利用这三种技术,打造了一个功能完善的模拟购物平台,实现了动态信息浏览、商品检索、用户注册登录以及数据的增删改等功能。 一、HTML5:新一代的网页...
HTML5、CSS3和JavaScript是构建现代网页的三大核心技术,它们共同作用于动态网页的设计与制作,赋予网页交互性、视觉吸引力和功能多样性。在这个"动态网页设计与制作(HTML5+CSS3+JavaScript)源代码和素材.zip"压缩包...
在"疯狂HTML 5CSS 3JavaScript讲义光盘代码"中,可能包含了一系列教程章节,涵盖了这些技术的基础到进阶内容,比如: 1. HTML5的新元素和API:讲解如何使用新的语义元素,以及如何利用Canvas、Web Storage、Web ...
HTML、CSS 和 JavaScript动态、交互式的网页HTML、CSS 和 JavaScript动态、交互式的网页HTML、CSS 和 JavaScript动态、交互式的网页HTML、CSS 和 JavaScript动态、交互式的网页HTML、CSS 和 JavaScript动态、交互式...
HTML5、CSS3和JavaScript是构建现代网页的三大核心技术,它们共同构成了网页的结构、样式和交互性。这个"HTML5+CSS3+JavaScript网页设计案例课堂-课本源代码.zip"压缩包很可能是用于教学或自学目的的资源,包含了一...
李刚以其程序员的独特视角,深入浅出地介绍了HTML5、CSS3和JavaScript这三种核心的前端技术,旨在帮助读者从软件开发的角度理解和应用这些技术。 HTML5是现代网页开发的基础,它对HTML4进行了大量的改进和扩展。书...
《jQuery.JavaScript与CSS开发入门经典》是一本旨在引导初学者进入前端开发领域的书籍,它涵盖了Web开发中三个至关重要的技术:jQuery、JavaScript和CSS。这三者是构建交互式和动态网页的基础,也是现代Web开发的...
JavaScript5(通常指ECMAScript 5)是它的标准化版本,包含了一些重要的改进,如严格模式、对象字面量和数组字面量的扩展、JSON支持等。现代JavaScript(ES6及以上)进一步引入了类、模块、箭头函数等语法特性,提升...
JavaScript是一种广泛使用的解释型、基于原型的脚本语言,它是实现网页交互性和动态效果的关键。JavaScript.chm手册可能涵盖了变量、数据类型、控制流、函数、对象、数组、正则表达式、DOM操作、BOM处理、事件处理、...
HTML5、CSS3和JavaScript是构建现代网页的三大核心技术,它们共同构成了网页的结构、样式和行为。这个压缩包文件“HTML5+CSS3+JavaScript网页制作从入门到精通054245【实例示例源程序】”显然包含了丰富的学习资源,...
交互式Web前端开发》欢迎选择一种更高效的学习JavaScript和jQuery的方式。你是一名JavaScript新手?或是您曾经向自己的Web页面上添加过一些脚本,但想以一种更好的方式来实现它们?本书非常适合您。《JavaScript&...
《疯狂HTML5+CSS3+JavaScript讲义》将深入探讨这些技术的原理、使用方法和实际案例,不仅讲解基础知识,也会涉及进阶话题,如AJAX异步通信、WebSocket实时通信、Web Workers多线程处理等。通过阅读这本书,读者可以...
在这个项目中,HTML5作为前端展示的基础,CSS3负责样式设计和交互效果,JavaScript用于增强用户体验,而Java作为后端语言处理业务逻辑,MySQL作为数据库存储系统数据。 【HTML5】HTML5是超文本标记语言的最新版本,...
该项目不仅为开发者提供了一个构建动态、交互式网页应用的完整框架,还展示了一种高效、模块化的开发方法。它利用JavaScript、HTML和CSS的协同工作,实现了包含图片上传、拍照识别等功能的复杂交互式设计,为用户...
JavaScript是一种强大的编程语言,它赋予了网页动态交互的能力,而CSS则是用于控制网页样式和布局的关键工具。本项目旨在利用这两种技术在网页上创建一个生动逼真的电风扇效果,提供用户交互体验。 首先,我们要...
在IT行业中,前端开发是构建网页和应用程序的重要部分,而CSS3、HTML5和JavaScript是这一领域的三大核心技术。本套参考手册集成了这三门语言的详细知识,旨在为开发者提供全面的学习和参考资料。 首先,CSS3(层叠...
HTML(HyperText Markup Language)是用于创建网页内容的标记语言,CSS(Cascading Style Sheets)则负责定义这些内容的视觉样式,而JavaScript是一种强大的脚本语言,用于增加网页的动态功能和交互性。 在HTML5中...