Javascript侦听开发人员工具中所做的样式更改 [英] Javascript listen for style changes made in developer-tools

问题描述

有没有办法检测仅在开发人员工具(检查元素)中所做的样式更改?

Is there a way to detect style changes made only in the developer-tools (inspect element)?

如果用户以管理员身份登录，我想允许保存它们.

I want to allow to save them if the user is logged in as admin.

推荐答案

您可以在JavaScript中使用element.style访问HTMLElement的样式.因此，您可以在页面加载时保存样式，在用户启动保存并进行比较时再次检查它们-区别在于用户的更改.

You can access the styles of a HTMLElement using element.style in JavaScript. So you could probably save the styles on page load, check them again when the user initiates a save and compare -- the difference would be the users changes.

关于立即检测到它们，您可以使用MutationObserver来通知页面上的属性更改.当您将样式添加到Devtools中的特定元素时有效，但不适用于编辑现有样式和(我认为)将样式添加到现有选择器中.这些变化时，我不确定是否有办法获取事件.

As for detecting them as soon as they happen, you can use MutationObserver to get notified of attribute changes on the page. This works for when you add styles to a specific element in the Devtools, but not for editing existing styles and (I think) adding styles to existing selectors. I'm not sure if there is a way to get an event when these change.

实际上，似乎检查element.style具有与使用MutationObserver相同的限制:仅显示为特定元素添加的样式(即，在DOM中显示为内联样式的样式).可能有一种方法可以实际访问所有样式，但我不知道.

actually, it seems as if checking element.style has the same limits as using MutationObserver: only styles added for the specific element (that is, styles that show up as inline styles in the DOM) show up. There might be a way to actually access all styles, but I'm not aware of it.

这篇关于Javascript侦听开发人员工具中所做的样式更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！