JavaScript和CSS交互的方法汇总,5种你未必知道的
分类:前端技术

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

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

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

随着浏览器不断的提高改善,CSS和JavaScript之间 的界限越来越模糊。本来它们是负责着完全不一致的成效,但谈起底,它们都属于网页前端本领,它们需求互相密切的合作。大家的网页中都有.js文件和.css文 件,但那并不代表CSS和js是独立不能够相互的。上面要讲的那各个JavaScript和CSS协同合作的措施你大概未必知道!

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

用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属性值。若是你想创立二个动态的,风格别致的网址,那是生龙活虎种非常管用的手艺!

世家都清楚怎么样通过贰个要素的style属性获取它的CSS样式值,但能博取伪成分(pseudo-element)的属性值吗?能够的,使用JavaScript也能够访谈页面中的伪元素。

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里也达成了它。

复制代码 代码如下:

平素对样式表实行增多和删除样式法规

咱俩都万分领会使用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');

加载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语法高亮脚本正是延迟加载的。当有着的财富都加载后,回调函数就能够接触,小编可在回调函数里加载它。特别实用!

瞧见了呢,我能访谈伪成分里的content属性值。假如您想成立三个动态的,风格别致的网址,那是大器晚成种特别管用的才能!

CSS鼠标指针事件

CSS鼠标指针事件pointer-events品质特其他有意思,它的效劳非常像JavaScript,当您把这些本性设置为none时,它能使得的阻拦禁止这几个因素,你大概会说“那又何以?”,但事实上,它是明令防止了那几个因素上的别的JavaScript事件或回调函数!

JavaScript

.disabled { pointer-events: none; }

1
.disabled { pointer-events: none; }

点击那个成分,你会意识其余你放置在此个成分上的监听器都不会触发任何事件。三个美妙的坚守,真的——你不在需求为了以免万后生可畏某些事件会被触发而去检查有些css类是不是存在。

就是那5给您可能还平素不意识的CSS和JavaScript交互的法子。你还应该有新的发掘呢?分享出去!

赞 1 收藏 评论

图片 1

classList API

洋洋的JavaScript工具Curry都有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

绝大大多的浏览器里很已经实现了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");

这种办法日常是用来创设叁个新的体制法规,但假若你想校正一个存世的法规,也得以这么做。

加载CSS文件

延期加载图片、JSON、脚本等是用来加速页面展现速度的好措施。大家能够动用curl.js等如此JavaScript加载器来延缓加载那一个外部财富,可你知道CSS样式表也能够推迟加载吗,并且在加载成功后回调函数会予以照望。

复制代码 代码如下:

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

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

CSS鼠标指针事件

CSS鼠标指针事件pointer-events属性特其他有意思,它的效果与利益非常像JavaScript,当您把那特性情设置为none时,它能有效的遏止制止那么些成分,你或然会说“那又何以?”,但其实,它是明确命令禁绝了那些成分上的别样JavaScript事件或回调函数!

复制代码 代码如下:

.disabled { pointer-events: none; }

点击那几个因素,你会意识别的你放置在此个因素上的监听器都不会接触任何事件。贰个美妙的效应,真的——你不在要求为了防御某些事件会被触发而去反省有个别css类是还是不是留存。

如上正是私有总括的5种javascript和CSS进行互动的方法,大家只要有更加好的,请告之,本文将到处更新

你恐怕感兴趣的篇章:

  • javascript中Number对象的toString()方法深入分析
  • javascript使用for循环批量注册的事件无法科学获取索引值的化解办法
  • javascript 决断整数艺术分享
  • Javascript深入分析U酷威L方法详明
  • javascript常用艺术汇总
  • javascript中数组array及string的不二等秘书技总计
  • JavaScript定义类和对象的法子
  • javascript获取flash版本号的点子
  • javascript中String对象的slice()方法深入分析

本文由pc28.am发布于前端技术,转载请注明出处:JavaScript和CSS交互的方法汇总,5种你未必知道的

上一篇:CSS最棒实行团队支付,分页控件以至分页控件风 下一篇:没有了
猜你喜欢
热门排行
精彩图文