浏览器继续升级，CSS和Javaｓｃｒｉｐｔ之间的界限变得越来越模糊。他们负责完全不同的功能，但最终，他们都属于Web前端技术，他们需要密切合作。我们有。Js。在我们的网页上的CSS文件，但这并不意味着CSS和JS是独立的，不能相互作用。以下五种共用Javaｓｃｒｉｐｔ和CSS工作可能不是你知道的！

用Javaｓｃｒｉｐｔ获取伪元素（伪元素）属性

每个人都知道如何通过元素的样式属性获得它的CSS样式值，但是你能得到伪元素（伪元素）的属性值吗是的，您还可以使用Javaｓｃｒｉｐｔ访问页面中的伪元素。
复制代码代码如下所示：
元素的颜色值：
VaR的颜色= window.getcomputedstyle（
document.queryselector（'元'），'前'
）。GetPropertyValue（色彩）；

元素的内容值：
无功量= window.getcomputedstyle（
document.queryselector（'元'），'前'
GetPropertyValue（'content'））；

看，我可以访问伪元素中的内容属性值。如果你想创建一个动态的，时髦的网站，这是一个非常有用的技术！

列表API

很多Javaｓｃｒｉｐｔ工具addClass，removeClass，和toggleclass方法。为了与旧的浏览器兼容，这些类库采用的是搜索的元素的类名的方式，添加和删除这个类，然后更新className。事实上，有一个新的API，提供了一种方法来添加、删除，和CSS类的反向特性，称为列表：
复制代码代码如下所示：
MyDiv.classList.add（'mycssclass '）； / /添加一个类
MyDiv.classList.remove（'mycssclass '）； / /删除一个类
MyDiv.classList.toggle（'mycssclass '）； / /切换类

大多数的浏览器，classlistapi实施早期，并最终实现在IE10。

添加和删除样式规则直接到样式表

我们都是用element.style.propertyname修改样式很熟悉，使用Javaｓｃｒｉｐｔ可以帮助我们做这些事情，但是你知道如何添加或修复现有的CSS样式规则吗这很简单。
复制代码代码如下所示：
功能addcssrule（片、选择器、规则、指标）{
如果（表。insertrule）{
Sheet.insertRule（选择器+{+规则+}
}
{其他
Sheet.addRule（选择、规则、指标）；
}
}
使用 /它！
AddCSSRule（文档样式表{ 0 }，头


此方法通常用于创建新样式规则，但如果您希望修改现有规则，则可以这样做。

加载CSS文件

延迟加载图片，JSON，脚本，都是加快网页显示的一个好办法。我们可以用curl.js和其他Javaｓｃｒｉｐｔ装载机延迟加载这些外部资源。你知道CSS样式表也可以延迟加载，回调函数在加载成功后会被通知吗。
复制代码代码如下所示：
（卷曲
{
命名空间MyWidget /
CSS！命名空间/资源/ MyWidget CSS。
}，
功能（MyWidget）{
/ / you can operate on MyWidget
没有这个CSS文件引用，因为没有必要；
我们只需要将它加载到页面中。
}
}）；

当加载所有资源时，回调函数将被触发，并且我可以在回调函数中加载它，非常有用！

鼠标指针事件

CSS鼠标指针事件指针事件属性非常有趣，它的功能非常类似于javaｓｃｒｉｐｔ。当您将此属性设置为非时，它可以有效地阻止此元素被禁止。你会怎么说但实际上，它禁止在此元素上的任何Javaｓｃｒｉｐｔ事件或回调函数！
复制代码代码如下所示：
禁用{事件：无；}

点击这个元素，你会发现你放置在这个元素上的侦听器不会触发任何事件。一个神奇的功能，真的-你不需要检查CSS类的存在，以防止事件被触发。

这是你可能没有发现CSS和Javaｓｃｒｉｐｔ之间的交互的5种方法。你有什么新发现吗分享它！