您不一定知道的JavaScript和CSS交互的5种艺术,5种你不一定知道的JavaScript和CSS交互的方法

5种你不一定知道的JavaScript和CSS交互的点子

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

原稿出处:
davidwalsh   译文出处:webhek   

乘机浏览器不断的擢升修正,CSS和JavaScript之间
的尽头越来越模糊。本来它们是肩负着完全分化的功力,但说到底,它们都属于网页前端技术,它们需求相互密切的合营。大家的网页中都有.js文件和.css文
件,但那并不代表CSS和js是独立无法相互的。下面要讲的那二种JavaScript和CSS共同合营的不二法门你或者未必知道!

乘机浏览器不断的升级换代更正,CSS和JavaScript之间的无尽越来越模糊。本来它们是负担着完全差其他功效,但说到底,它们都属于网页前端技术,它们必要相互密切的同盟。大家的网页中都有.js文件和.css文件,但那并不代表CSS和js是独立不恐怕相互的。下边要讲的那各种JavaScript和CSS共同同盟的点子你或许未必知道!

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

随着浏览器不断的晋级改进,CSS和JavaScript之间的限度越来越模糊。本来它们是承受着完全差其余效劳,但结尾,它们都属于网页前端技术,它们必要相互密切的搭档。大家的网页中都有.js文件和.css文件,但那并不意味着CSS和js是单身不能互相的。上面要讲的那各类JavaScript和CSS共同同盟的不二法门您只怕未必知道!

用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属性值。即使你想创造一个动态的,风格别致的网站,那是一种越发实惠的技巧!

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

世家都晓得怎么样通过一个成分的style属性获取它的CSS样式值,但能得到伪成分(pseudo-element)的属性值吗?可以的,使用JavaScript也足以访问页面中的伪成分。

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

classList API

不少的JavaScript工具库里都有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里也兑现了它。

世家都知道什么通过一个因素的style属性获取它的CSS样式值,但能博取伪元素(pseudo-element)的属性值吗?可以的,使用JavaScript也足以访问页面中的伪元素。

复制代码 代码如下:

世家都明白哪些通过一个要素的style属性获取它的CSS样式值,但能取得伪成分(pseudo-element)的属性值吗?可以的,使用JavaScript也得以访问页面中的伪成分。

直接对样式表进行添加和删除样式规则

俺们都不行纯熟使用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");

那种方法一般是用来创立一个新的样式规则,但如果你想修改一个存世的规则,也可以这么做。

复制代码 代码如下:

// 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’);

您不一定知道的JavaScript和CSS交互的5种艺术,5种你不一定知道的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语法高亮脚本就是延迟加载的。当有着的资源都加载后,回调函数就会接触,我可在回调函数里加载它。万分管用!

<span style=”font-size:18px;”>// Get the color value of
.element:before
var color = window.getComputedStyle(
document.querySelector(‘.element’), ‘:before’
).getPropertyValue(‘color’);

看见了吗,我能访问伪元素里的content属性值。如若您想创制一个动态的,风格别致的网站,那是一种至极有效的技术!

<span style=”font-size:18px;”>// Get the color value of
.element:before
var color = window.getComputedStyle(
document.querySelector(‘.element’), ‘:before’
).getPropertyValue(‘color’);

CSS鼠标指针事件

CSS鼠标指针事件pointer-events性子相当的有趣,它的法力更加像JavaScript,当你把那些个性设置为none时,它能有效的拦截禁止这一个成分,你可能会说“那又怎么?”,但实际上,它是不准了那些成分上的任何JavaScript事件或回调函数!

JavaScript

.disabled { pointer-events: none; }

1
.disabled { pointer-events: none; }

点击那个因素,你会发现其它你放置在这么些成分上的监听器都不会接触任何事件。一个神奇的意义,真的——你不在须求为了防备某个事件会被触发而去反省某个css类是或不是留存。

就是这5给您大概还从未意识的CSS和JavaScript交互的章程。你还有新的意识呢?分享出去!

赞 1 收藏
评论

亚洲必赢官网 1

// Get the content value of .element:before
var content = window.getComputedStyle(
document.querySelector(‘.element’), ‘:before’
).getPropertyValue(‘content’);</span>

classList API

// Get the content value of .element:before
var content = window.getComputedStyle(
document.querySelector(‘.element’), ‘:before’
).getPropertyValue(‘content’);</span>

看见了吗,我能访问伪成分里的content属性值。倘使您想创设一个动态的,风格别致的网站,那是一种非凡有效的技艺!

不少的JavaScript工具库里都有addClass,removeClass和toggleClass等方法。为了对老式浏览器的匹配,这么些类库选拔的艺术都是先搜索成分的className,追加和删除那么些类,然后更新className。其实有一个风行的API提供了丰富,删除和反转CSS类属性的方法,叫做classList:

看见了呢,我能访问伪元素里的content属性值。若是你想创立一个动态的,风格别致的网站,那是一种极度有效的技艺!

classList API

复制代码 代码如下:

classList API

广大的JavaScript工具库里都有addClass,removeClass和toggleClass等艺术。为了对老式浏览器的匹配,那几个类库选择的主意都是先搜索成分的className,追加和删除这一个类,然后更新className。其实有一个风行的API提供了拉长,删除和反转CSS类属性的措施,叫做classList:

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

不少的JavaScript工具库里都有addClass,removeClass和toggleClass等艺术。为了对老式浏览器的同盟,这个类库拔取的点子都是先搜索成分的className,追加和删除这么些类,然后更新className。其实有一个风靡的API提供了充裕,删除和反转CSS类属性的章程,叫做classList:

复制代码 代码如下:

亚洲必赢官网 ,超过半数的浏览器里很已经完成了classListAPI,而且最终IE10里也落到实处了它。

复制代码 代码如下:

<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>

直白对样式表进行添加和删除样式规则

<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>

多数的浏览器里很已经达成了classListAPI,而且最终IE10里也落到实处了它。

大家都越发熟练使用element.style.propertyName来修改样式,使用JavaScript能帮衬我们完毕这几个,但你知道怎么新增或修一个存活的CSS样式规则吧?其实特其他简便。

一大半的浏览器里很已经完毕了classListAPI,而且最终IE10里也落实了它。

直白对样式表进行添加和删除样式规则

复制代码 代码如下:

间接对样式表举办添加和删除样式规则

大家都卓殊熟知使用element.style.propertyName来修改样式,使用JavaScript能扶助我们成功这几个,但您通晓什么样新增或修一个共处的CSS样式规则吧?其实极度的简易。

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”);

大家都分外精晓使用element.style.propertyName来修改样式,使用JavaScript能辅助我们完结那个,但您领悟怎么着新增或修一个共处的CSS样式规则吧?其实特其他简约。

复制代码 代码如下:

那种方法一般是用来创立一个新的体制规则,但只要您想修改一个共处的规则,也可以那样做。

复制代码 代码如下:

<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>

加载CSS文件

<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>

那种艺术一般是用来创建一个新的体裁规则,但万一你想修改一个存世的平整,也得以这么做。

延期加载图片、JSON、脚本等是用来加速页面突显速度的好法子。大家得以行使curl.js等这么JavaScript加载器来延缓加载那些外部资源,可您精通CSS样式表也可以顺延加载吗,而且在加载成功后回调函数会赋予关照。

这种艺术一般是用来创立一个新的体裁规则,但若是你想修改一个存世的条条框框,也足以如此做。

加载CSS文件

复制代码 代码如下:

加载CSS文件

延期加载图片、JSON、脚本等是用来加速页面展现速度的好法子。大家得以使用curl.js等如此JavaScript加载器来延缓加载那些外部资源,可您掌握CSS样式表也可以延缓加载吗,而且在加载成功后回调函数会予以通报。

curl(
[
“namespace/MyWidget”,
“css!namespace/resources/MyWidget.css”
],
function(MyWidget) {
// 你可以对MyWidget举办操作
// 那里没有对那些CSS文件引用,因为不要求;
// 大家只须求它早已加载到页面上了
}
});

推迟加载图片、JSON、脚本等是用来加快页面展现速度的好办法。大家可以利用curl.js等那样JavaScript加载器来推迟加载这一个外部资源,可你明白CSS样式表也足以延迟加载吗,而且在加载成功后回调函数会赋予通报。

复制代码 代码如下:

本网站使用的PrismJS语法高亮脚本就是延迟加载的。当所有的资源都加载后,回调函数就会触发,我可在回调函数里加载它。万分实惠!

复制代码 代码如下:

<span style=”font-size:18px;”>curl(
[
“namespace/MyWidget”,
“css!namespace/resources/MyWidget.css”
],
function(MyWidget) {
// 你可以对MyWidget进行操作
// 这里没有对那一个CSS文件引用,因为不须求;
// 大家只需求它早已加载到页面上了
}
});</span>

CSS鼠标指针事件

<span style=”font-size:18px;”>curl(
[
“namespace/MyWidget”,
“css!namespace/resources/MyWidget.css”
],
function(MyWidget) {
// 你可以对MyWidget举办操作
// 这里没有对那个CSS文件引用,因为不须求;
// 大家只须要它早已加载到页面上了
}
});</span>

当有着的资源都加载后,回调函数就会接触,我可在回调函数里加载它。相当有效!

CSS鼠标指针事件pointer-events属性卓殊的妙趣横生,它的出力越发像JavaScript,当你把这一个个性设置为none时,它能使得的阻挠禁止那几个因素,你大概会说“那又何以?”,但实际,它是禁止了这一个因素上的其余JavaScript事件或回调函数!

当所有的资源都加载后,回调函数就会触发,我可在回调函数里加载它。卓殊实惠!

CSS鼠标指针事件

复制代码 代码如下:

CSS鼠标指针事件

CSS鼠标指针事件pointer-events属性万分的妙趣横生,它的效应尤其像JavaScript,当你把那一个个性设置为none时,它能使得的阻拦禁止这几个因素,你只怕会说“那又何以?”,但事实上,它是明令禁止了这一个因素上的其余JavaScript事件或回调函数!

.disabled { pointer-events: none; }

CSS鼠标指针事件pointer-events属性相当的好玩,它的功力更加像JavaScript,当您把那么些个性设置为none时,它能管用的掣肘禁止那几个元素,你恐怕会说“那又怎么着?”,但实在,它是明令禁止了这么些成分上的任何JavaScript事件或回调函数!

复制代码 代码如下:

点击这几个因素,你会发觉其余你放置在那几个元素上的监听器都不会接触任何事件。一个神奇的职能,真的——你不在必要为了预防某个事件会被触发而去检查某个css类是还是不是存在。

复制代码 代码如下:

<span style=”font-size:18px;”>.disabled { pointer-events: none;
}</span>

以上就是私房总括的5种javascript和CSS进行交互的法子,我们只要有更好的,请告之,本文将持续更新

<span style=”font-size:18px;”>.disabled { pointer-events: none;
}</span>

点击那一个因素,你会意识任何你放置在这些因素上的监听器都不会接触任何事件。一个神奇的功能,真的——你不在需求为了防备某个事件会被触发而去反省某个css类是不是存在。

你或者感兴趣的篇章:

  • javascript中Number对象的toString()方法分析
  • javascript使用for循环批量注册的事件不可以正确获取索引值的解决办法
  • javascript
    判断整数措施分享
  • Javascript解析URL方法详解
  • javascript常用艺术汇总
  • javascript中数组array及string的措施计算
  • JavaScript定义类和对象的不二法门
  • javascript获取flash版本号的方法
  • javascript中String对象的slice()方法分析

点击这些元素,你会发觉其余你放置在那么些成分上的监听器都不会接触任何事件。一个神奇的作用,真的——你不在须要为了预防某个事件会被触发而去检查某个css类是还是不是留存。

就是那5给你可能还从未意识的CSS和JavaScript交互的主意。你还有新的发现吗?分享出去!

就是那5给你或者还没有察觉的CSS和JavaScript交互的情势。你还有新的发现吗?分享出来!

你大概感兴趣的篇章:

  • JS+CSS已毕的一种互动体验
    表单页面
  • js+css在竞相上的应用
  • JavaScript和CSS交互的不二法门汇总
网站地图xml地图