使用JS監聽DOM元素的屬性及動畫 CSS過渡

2022-04-18 04:03:15 字數 892 閱讀 7259

這裡我們要是用的js的api，mutationobserver，進行監聽dom元素的監聽

注意：mutationobserver如果用來監聽寬高等，只能監聽其內部屬性，比如style中的width屬性，無法監聽class中的width改變

如果想要監聽動畫或者css過渡事件，mutationobserver是無法監聽到的，可以使用addeventlistener中的監聽方法

我是demo


var element = document.getelementbyid('demo')


//監聽過渡完成transitionend 監聽動畫完成animationend


element.addeventlistener('transitionend', handle, false)


function handle()
注意：元素從display:none 到block opacity從0到1，無法觸發過渡效果。

無法觸發過渡效果原因：

元素從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...