h5 css3交互动画_您可能不知道CSS和JavaScript交互的5种方式

h5 css3交互动画

CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but that doesn't mean that CSS and JS can't interact more closely than the basic JavaScript frameworks will allow.  Here are five ways that JavaScript and CSS work together that you may not know about!

CSS和JavaScript：每种浏览器版本之间的界限似乎都变得模糊。 他们总是做着非常不同的工作，但最终他们都是前端技术，因此他们需要紧密合作。 我们拥有.js文件和.css，但这并不意味着CSS和JS的交互作用不会超出基本JavaScript框架所允许的范围。 这是您可能不知道JavaScript和CSS协同工作的五种方式！

使用JavaScript获取伪元素属性 (Get Pseudo-Element Properties with JavaScript)

We know that we can get basic CSS style values for an element with the style property, but what about pseudo-element properties?  Yes, JavaScript can even access those too!

我们知道我们可以使用style属性获得元素的基本CSS样式值，但是伪元素属性呢？ 是的，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');

You can see how I access the content property value in my blog post about Device State Detection.  Incredibly useful if you're looking to create dynamic, unique sites!

您可以在有关设备状态检测的博客文章中看到如何访问content属性值。 如果您要创建动态，独特的网站，这将非常有用！

classList API (classList API)

We've all used the addClass, removeClass, and toggleClass methods in our favorite JavaScript libraries.  For the sake of supporting older browsers, each library would grab the element's className (in its string format) and appending/removing the class, then updates the className string.  There's a newer API for adding, removing, and toggling classes, and it's called classList:

我们都在我们喜欢JavaScript库中使用了addClass ， removeClass和toggleClass方法。 为了支持较旧的浏览器，每个库都将获取元素的className (以其字符串格式)并追加/删除类，然后更新className字符串。 有一个新的API用于添加，删除和切换类，它称为classList ：

myDiv.classList.add('myCssClass'); // Adds a class

myDiv.classList.remove('myCssClass'); // Removes a class

myDiv.classList.toggle('myCssClass'); // Toggles a class

classList has been implemented for a long time in most browsers, but this API hit IE at version 10.

在大多数浏览器中， classList已经实现了很长时间，但是该API在版本10的IE中很classList 。

直接在样式表中添加和删除规则 (Add and Remove Rules Directly to Stylesheets)

We're all well versed in modifying styles via the element.style.propertyName method, and we've used JavaScript toolkits to do it, but did you know you can actually read and write rules within new and existing stylesheets?  The API is actually quite simple too!

我们都精通通过element.style.propertyName方法修改样式，并且我们已经使用JavaScript工具包来做到这一点，但是您知道您实际上可以在新样式表和现有样式表中读写规则吗？ 该API实际上也非常简单！

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

The most common use case is creating a new stylesheet, but if you want to modify an existing stylesheet, go for it.

最常见的用例是创建一个新的样式表，但是如果您要修改现有的样式表，那就去做吧。

使用加载程序加载CSS文件 (Load CSS Files with a Loader)

Lazy-loading resources like images, JSON, and scripts is a great way to decrease load time.  We can load those external resources with JavaScript loaders like curl.js, but did you know you can lazy load stylesheets and get that notification within the same callback?

延迟加载资源(例如图像，JSON和脚本)是减少加载时间的好方法。 我们可以使用curl.js之类JavaScript加载器加载这些外部资源，但是您知道您可以延迟加载样式表并在同一回调中获取该通知吗？

curl(
	[
		"namespace/MyWidget",
		"css!namespace/resources/MyWidget.css"
	], 
	function(MyWidget) {
		// Do something with 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
	}
});

This blog lazy loads PrismJS, the syntax highlighter, based on the presence of pre elements.  Once all resources are loaded, including the stylesheet, I can fire off a callback.  Useful!

该博客根据pre元素的存在懒加载了语法高亮器PrismJS。 加载所有资源(包括样式表)后，就可以触发回调。 有用！

CSS pointer-events (CSS pointer-events)

CSS' pointer-events property is interesting in that it almost acts in a JavaScript-like way, effectively disabling an element when the value is none but otherwise allowing the element to function per usual when the value isn't none.  You may be saying "so what?!" but pointer-events even prevent JavaScript events from firing!

CSS” pointer-events属性是有趣的，因为它几乎是一个JavaScript样的方式，有效地当值是没有禁止的元素，但否则允许元素按通常的功能，当值不为的行为none 。 您可能会说：“那又怎样？！” 但是指针事件甚至会阻止触发JavaScript事件！

.disabled { pointer-events: none; }

Click on that element and any addEventListener callback you've placed on the element will not fire.  A perfect property, really -- you don't need to do a className check before you decide whether or not to fire something based on class presence.

单击该元素，将不会触发您放置在该元素上的任何addEventListener回调。 实际上，这是一个完美的属性-在基于类的存在来决定是否触发某些操作之前，无需进行className检查。

Those are just five ways that CSS and JavaScript interact that you don't always think of.  Have more ideas?  Please share them!

这些只是CSS和JavaScript交互的五种方式，您并非总是想到这种方式。 还有更多想法吗？ 请分享！

翻译自: https://davidwalsh.name/ways-css-javascript-interact

h5 css3交互动画