如何使用JavaScript禁用webkit-text-size-adjust功能

Question

我正在尝试构建一个Chrome扩展程序，可以自动禁用LinkedIn上的webkit-text-size-adjust CSS规则，以便在我放大页面时文本也会随之缩放。

使用Chrome的开发者工具中的Elements Styles窗口，我可以将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的专家，所以我想我可能遗漏了一些简单的东西...

- Jon Fournier

---

我视力较差，经常将页面默认缩放至200％。使用“-webkit-text-size-adjust：none”后，我无法阅读任何内容，唯一的选择是使用Firefox浏览器。这是我最大的问题之一，请务必解决并与我分享链接。 - Theodore R. Smith

由于我没有看到任何人实际上已经打包了这个，所以我自己动手了。完全是从这里的评论中偷来的，除了不得不使用“auto”作为值之外：https://chrome.google.com/webstore/detail/webkit-text-size-adjust-r/jgfjnnljbpgajihjcajeiabjomhmjhec - FauxFaux

非常感谢您创建这个扩展，真的很有用！许多网站对-webkit-text-size-adjust:none的粗心使用可能是Chrome市场份额开始下降的原因。 - Rob Hoare

@FauxFaux 我刚开始对这种网站感到非常恼火，我一直在手动更改一些网站的字体大小，决定不再忍受了，我会找出原因并编写一个扩展程序，谢谢你节省了我的一些精力 :) - Chao

似乎 element.style.webkitTextSizeAdjust 不是 JavaScript 属性；你必须使用 element.style["-webkit-text-size-adjust"] 来处理它。对于这个晚评论表示抱歉。 - Jamie Birch

Answer 1

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

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

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

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

- Rob W

---

我想禁用所有网站的字体调整。我该怎么做？ - Theodore R. Smith

@Theodore 在匹配字段中使用 <all_URLs> 或 *://*/*，并加上 !important 标志。 - Rob W

Answer 2

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

- kbtz