// 获取目标元素 const element = document.getElementById('targetElement'); // 设置CSS属性（例如背景图片URL） element.style.backgroundImage = "url('https://example.com/image.jpg')"; 如何使用HOOK拦截这样的操作-Go服务器开发

要拦截通过 JavaScript 动态修改 CSS 属性（如 element.style.backgroundImage）的操作，可以通过以下几种 Hook（钩子） 方法实现。以下是具体方案：

方法1：劫持 `HTMLElement.prototype.style` 的 setter

通过修改原型链，拦截对 style 属性的赋值操作：

// 保存原生方法
const originalStyleSetter = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'style').set;
// 劫持 style 属性的 setter
Object.defineProperty(HTMLElement.prototype, 'style', {
  set: function(newStyle) {
    console.log('拦截到 style 修改:', newStyle);
    
    // 检查是否设置了 backgroundImage
    if (newStyle.backgroundImage) {
      console.log('试图修改背景图片:', newStyle.backgroundImage);
      // 可以在此处修改或阻止原始行为
      // newStyle.backgroundImage = "url('blocked.jpg')"; // 强制替换URL
    }
    // 调用原始 setter（若需放行操作）
    originalStyleSetter.call(this, newStyle);
    
    // （可选）完全阻止赋值：
    // throw new Error("禁止直接修改style！");
  },
  get: function() {
    return this._style; // 返回缓存的样式对象
  }
});

方法2：监听 DOM 属性变化（MutationObserver）

适用于监控元素的内联样式变化：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      const target = mutation.target;
      console.log('拦截到 style 变更:', target.style.cssText);
      
      // 检查并处理 backgroundImage
      if (target.style.backgroundImage) {
        console.log('新的背景图 URL:', target.style.backgroundImage);
        // target.style.backgroundImage = "url('overridden.jpg')"; //覆盖值
      }
    }
  });
});
// 开始观察目标元素
const element = document.getElementById('targetElement');
observer.observe(element, { attributes: true, attributeFilter: ['style'] });

方法3：代理（Proxy）目标元素的 style对象

精细控制对 element.style的每次属性修改：

const element = document.getElementById('targetElement');
//创建 Proxy 
const styleProxy = new Proxy(element.style, {
	set(target, prop, value) {  
		if (prop === 'backgroundImage') {  
			console.log(`拦截到 ${prop}`, value);  
			value = "url('hooked.jpg')";   //强制替换URL  
		}  
		target[prop] = value;   //放行其他属性  
		return true;  
	}  
});  
//替换原 style引用  
element.style = styleProxy;  
//测试触发拦截 
element.style.backgroundImage = "url('test.jpg')";