如何使用 JavaScript 禁用 webkit-text-size- adjustment

Question

我正在尝试构建一个 Chrome 扩展程序，它将自动禁用 LinkedIn 上的 webkit-text-size-adjust CSS 规则。这样我就可以在缩放页面时缩放文本。

使用 Elements Styles 窗口中的 Chrome 开发人员工具，我可以将 webkit-text-size-adjust 从“none”更改为“0”，这样可以在缩放时更改文本大小。

但是，我不知道如何使用 JavaScript 禁用此规则。我编写了一个 Chrome 扩展程序，当我访问 linkedin.com/* 时执行一个函数，但我需要编写一个函数来删除/修改 webkit-text-size-adjust 规则。

我尝试了一些方法，但它们不起作用。

document.getElementsByTagName('html')[0].style.webkitTextSizeAdjust="0"

我还尝试递归地遍历 document.body 中的每个 childNode 并使用removeProperty 将其关闭，但这对我来说也不起作用。

function remtextadj(node){
  node.style.removeProperty('-webkit-text-size-adjust');
  for(var i=0;i<node.childNodes.length;i++){
     var nod=node.childNodes[i];
     remtextadj(nod);
     }
  }

  remtextadj(document.body);

那么我怎样才能用javascript删除这个规则呢？我不是 CSS 或 JavaScript 方面的专家，所以我想我错过了一些简单的东西......

Answer 1

注入以下 CSS，这将强制浏览器使用该样式：

*{-webkit-text-size-adjust:0 !important}

!important 标志使声明采用最高的可用优先级。通过 manifest 文件将自定义样式添加到页面：

 ...
 "content_scripts": [{
    "matches": ["http://sitehere/*"],
    "css": ["customstyle.css"]
 }],
 ...

Answer 2

var myStyle = document.createElement('style');
myStyle.innerHTML = 'body * {-webkit-text-size-adjust:none !important;}';
document.head.appendChild(myStyle);