JS和CSS加载（渲染）机制不同

Posted 2020-06-08

一、结论

CSS可以在页面加载完成后随时渲染。举个例子：通过js给某个元素加一个id或者css，只要这个id或者css有对应的样式，此元素的样式就会自动生效。

JS不可以在页面加载完成后生效。最明显的例子就是使用EasyUI的时候，iframe中哪些样式无效（EasyUi是依靠JS进行样式处理的，所以无法运行JS，那么样式也就无法设置。简单点说：EasyUi是一个JS的前端框架，Bootstrap是一个CSS的前端框架，二者不同）。

二、现象

对于EasyUi那样的js核心的框架我没有想到办法，但是对于一些简单的时间还是可以处理的。

以下是我实际开发遇到的一个问题，我将其抽象出来：

某个按钮class为"tt"不是原生的html存在页面中的，而是通过页面加载过程中的JS生成的.

在最初我有如下语句：

$(".tt").click(function(){
     alert("xxx");
});

但是这个方法死活触发不了，根据上述第一点我的结论可知，这个是因为页面的JS已经加载完了，此时元素还没有生成。自然而言的无法有效的绑定事件。

那么怎么处理了？

<button onclick="mc-alert()">TELL</button>

将alert()放在方法mc-alert()中，即可。

三、深度剖析

小生水平不够，只能意味不能言传，也可以说是没有想明白，你懂，请不吝赐教。。。3Q。