這裡我們要是用的js的api,mutationobserver,進行監聽dom元素的監聽注意:mutationobserver如果用來監聽寬高等,只能監聽其內部屬性,比如style中的width屬性,無法監聽class中的width改變
如果想要監聽動畫或者css過渡事件,mutationobserver是無法監聽到的,可以使用addeventlistener中的監聽方法
注意:元素從display:none 到block opacity從0到1,無法觸發過渡效果。我是demo
var element = document.getelementbyid('demo')
//監聽過渡完成transitionend 監聽動畫完成animationend
element.addeventlistener('transitionend', handle, false)
function handle()
無法觸發過渡效果原因:
元素從none到block,剛生成未能即時渲染,導致過渡失效。所以需要主動觸發頁面重繪,重新整理dom。
頁面重繪可以通過改變一些css屬性來觸發,例如:offsettop、offsetleft、offsetwidth、scrolltop等。
配置mutationobserver
mutationobserver使用示例
改變大小試試
觸發了}次resize事件。
給dom元素新增事件的監聽
一 addeventlistener給dom元素新增事件的監聽有兩種方式 1.用匿名函式方式新增事件的監聽 例按鈕 按鈕按鈕 按鈕按鈕2.用外部函式新增事件的監聽 例不能用 var btnvase function 的函式形式新增事件的監聽,此函式沒有預編譯功能 二 removeeventliste...
DOM對元素屬性的操作
獲取元素屬性值 input.getattribute type 給元素新增屬性值 第乙個引數是屬性名,第二個引數是屬性的值 必須兩個引數 input.setattribute yes ok yes ok新增屬性 乙個值 input.attributes.setnameditem disabled 建...
使用JS操作頁面元素屬性
1 如何用jquery動態改變輸入框的readonly屬性 input attr readonly readonly 新增readonly屬性 input removeattr readonly 移除readonly屬性 input name username attr readonly reado...