你未必知道的JavaScript和CSS交互的5种方法,5种你

作者: 前端知识  发布:2019-08-29

5种你不一定知道的JavaScript和CSS交互的章程

2014/04/02 · CSS, JavaScript · CSS, Javascript

原来的小说出处: davidwalsh   译文出处:webhek   

乘胜浏览器不断的提拔改良,CSS和JavaScript之间 的限度越来越混淆。本来它们是承担着完全不相同的功能,但说起底,它们都属于网页前端本领,它们须求相互紧凑的搭档。大家的网页中都有.js文件和.css文 件,但那并不意味CSS和js是单独不可能相互的。上边要讲的那多种JavaScript和CSS共同合营的格局你恐怕未必知道!

当全体的能源都加载后,回调函数就能够接触,作者可在回调函数里加载它。特别管用!

加载CSS文件

延期加载图片、JSON、脚本等是用来加速页面展现速度的好点子。大家能够选拔curl.js等如此JavaScript加载器来推迟加载这几个外界能源,可您领会CSS样式表也足以延缓加载吗,何况在加载成功后回调函数会赋予照拂。

JavaScript

curl( [ "namespace/MyWidget", "css!namespace/resources/MyWidget.css" ], function(MyWidget) { // 你能够对MyWidget进行操作 // 这里未有对那些CSS文件引用,因为无需; // 大家只须求它早就加载到页面上了 } });

1
2
3
4
5
6
7
8
9
10
11
curl(
[
"namespace/MyWidget",
"css!namespace/resources/MyWidget.css"
],
function(MyWidget) {
// 你可以对MyWidget进行操作
// 这里没有对这个CSS文件引用,因为不需要;
// 我们只需要它已经加载到页面上了
}
});

本网址使用的PrismJS语法高亮脚本正是延迟加载的。当有着的能源都加载后,回调函数就可以触发,作者可在回调函数里加载它。特别管用!

复制代码 代码如下:

向来对样式表实行增添和删除样式准绳

我们都十三分熟知使用element.style.propertyName来修改样式,使用JavaScript能支持我们完成这几个,但您领会怎么着新扩大或修一个存世的CSS样式法规吧?其实极其的简约。

JavaScript

function addCSSRule(sheet, selector, rules, index) { if(sheet.insertRule) { sheet.insertRule(selector "{" rules "}", index); } else { sheet.addRule(selector, rules, index); } } // Use it! addCSSRule(document.styleSheets[0], "header", "float: left");

1
2
3
4
5
6
7
8
9
10
11
function addCSSRule(sheet, selector, rules, index) {
if(sheet.insertRule) {
sheet.insertRule(selector "{" rules "}", index);
}
else {
sheet.addRule(selector, rules, index);
}
}
 
// Use it!
addCSSRule(document.styleSheets[0], "header", "float: left");

这种格局一般是用来成立贰个新的样式法规,但假如您想修改三个现存的条条框框,也足以那样做。

复制代码 代码如下:

用JavaScript获取伪成分(pseudo-element)属性

大家都晓得如何通过多少个要素的style质量获取它的CSS样式值,但能得到伪成分(pseudo-element)的属性值吗?能够的,使用JavaScript也得以采访页面中的伪成分。

JavaScript

// Get the color value of .element:before var color = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('color'); // Get the content value of .element:before var content = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('content');

1
2
3
4
5
6
7
8
9
// Get the color value of .element:before
var color = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('color');
 
// Get the content value of .element:before
var content = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('content');

眼见了啊,笔者能访谈伪成分里的content属性值。假若您想创立二个动态的,风格别致的网址,那是一种特别管用的技术!

<span style="font-size:18px;">function addCSSRule(sheet, selector, rules, index) {
if(sheet.insertRule) {
sheet.insertRule(selector "{" rules "}", index);
}
else {
sheet.addRule(selector, rules, index);
}
}
// Use it!
addCSSRule(document.styleSheets[0], "header", "float: left");
</span>

classList API

洋洋的JavaScript工具Curry都有addClassremoveClasstoggleClass等措施。为了对老式浏览器的匹配,这几个类库采纳的格局都以先寻觅成分的className,追加和删除这些类,然后更新className。其实有一个流行的API提供了增加,删除和反转CSS类属性的艺术,叫做classList:

JavaScript

myDiv.classList.add('myCssClass'); // Adds a class myDiv.classList.remove('myCssClass'); // Removes a class myDiv.classList.toggle('myCssClass'); // Toggles a class

1
2
3
4
5
myDiv.classList.add('myCssClass'); // Adds a class
 
myDiv.classList.remove('myCssClass'); // Removes a class
 
myDiv.classList.toggle('myCssClass'); // Toggles a class

大部的浏览器里很已经实现了classListAPI,何况末了IE10里也达成了它。

用JavaScript获取伪成分(pseudo-element)属性

CSS鼠标指针事件

CSS鼠标指针事件pointer-events属性特别的风趣,它的效果与利益非常像JavaScript,当您把那一个性情设置为none时,它能一蹴而就的拦截禁止这么些成分,你或然会说“那又怎么样?”,但事实上,它是禁止了那几个因素上的其余JavaScript事件或回调函数!

JavaScript

.disabled { pointer-events: none; }

1
.disabled { pointer-events: none; }

点击这些成分,你会意识另外你放置在那几个成分上的监听器都不会接触任何事件。一个神奇的意义,真的——你不在须要为了防卫有些事件会被触发而去反省有些css类是不是存在。

正是那5给你或者还从未意识的CSS和JavaScript交互的法子。你还应该有新的觉察吗?分享出来!

赞 1 收藏 评论

图片 1

就是那5给你可能还未曾发觉的CSS和JavaScript交互的法子。你还应该有新的开掘吗?分享出来!

CSS鼠标指针事件pointer-events属性特其余幽默,它的作用极其像JavaScript,当你把那本性格设置为none时,它能管用的阻止禁止这么些成分,你大概会说“那又何以?”,但事实上,它是明确命令禁止了那么些成分上的别样JavaScript事件或回调函数!

<span style="font-size:18px;">myDiv.classList.add('myCssClass'); // Adds a class
myDiv.classList.remove('myCssClass'); // Removes a class
myDiv.classList.toggle('myCssClass'); // Toggles a class</span>

眼见了啊,小编能访问伪元素里的content属性值。假如你想制造二个动态的,风格别致的网址,那是一种相当实用的手艺!

延迟加载图片、JSON、脚本等是用来加快页面显示速度的好情势。大家能够运用curl.js等这么JavaScript加载器来贻误加载那几个外界财富,可您知道CSS样式表也得以推迟加载吗,并且在加载成功后回调函数会给予照顾。

点击这些因素,你会意识任何你放置在那几个成分上的监听器都不会接触任何事件。贰个奇妙的效果与利益,真的——你不在必要为了防止某些事件会被触发而去检查某些css类是还是不是留存。

我们都相当了解使用element.style.propertyName来修改样式,使用JavaScript能帮忙大家成功那几个,但你领会怎么新扩张或修一个现存的CSS样式法则吧?其实特别的简要。

世家都领悟哪些通过三个因素的style属性获取它的CSS样式值,但能获得伪成分(pseudo-element)的属性值吗?能够的,使用JavaScript也能够访谈页面中的伪成分。

乘势浏览器不断的晋级校订,CSS和JavaScript之间的限度更加的混淆。本来它们是背负着完全两样的职能,但结尾,它们都属于网页前端本事,它们供给相互紧凑的通力合营。大家的网页中都有.js文件和.css文件,但那并不表示CSS和js是独立无法彼此的。下边要讲的那各样JavaScript和CSS共同合营的章程您可能未必知道!

<span style="font-size:18px;">curl(
[
"namespace/MyWidget",
"css!namespace/resources/MyWidget.css"
],
function(MyWidget) {
// 你能够对MyWidget实行操作
// 这里未有对这一个CSS文件援用,因为无需;
// 我们只供给它已经加载到页面上了
}
});</span>

本文由金沙澳门官网发布于前端知识,转载请注明出处:你未必知道的JavaScript和CSS交互的5种方法,5种你

关键词: 金沙澳门官网

上一篇:开始编写CSS
下一篇:没有了