如何使用 JavaScript 禁用 webkit-text-size-adjust答案

【问题标题】：How to disable webkit-text-size-adjust with JavaScript如何使用 JavaScript 禁用 webkit-text-size-adjust
【发布时间】：2011-10-04 22:59:54
【问题描述】：

我正在尝试构建一个 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 方面的专家，所以我想我错过了一些简单的东西......

【问题讨论】：

我的网站视力不佳，我的页面经常以 200% 默认缩放。使用 -webkit-text-size-adjust:none，我无法阅读任何内容，我唯一的选择是使用 Firefox。这是我这些天浏览时的头号问题。请修复此问题并与我分享链接。
因为我看不到有人实际打包了这个，所以我做到了。完全从 cmets 那里偷来的，必须使用“auto”作为值：chrome.google.com/webstore/detail/webkit-text-size-adjust-r/…
非常感谢您创建扩展，非常有用！许多网站对 -webkit-text-size-adjust:none 的粗心使用可能是 Chrome 市场份额开始下降的原因。
@FauxFaux 我刚刚开始对这样做的网站感到恼火，我一直在一些网站上手动更改字体大小，并决定我已经受够了，会找到导致它的原因并写一个扩展，感谢您为我节省了一些精力:)
看来element.style.webkitTextSizeAdjust 不是Javascript 属性；你不得不使用element.style["-webkit-text-size-adjust"] 来解决这个问题。对此迟到的评论表示歉意。

标签： javascript css google-chrome-extension

【解决方案1】：

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

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

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

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

【讨论】：

我想为所有网站禁用字体调整。我该怎么做？
@Theodore 在匹配字段中使用<all_URLs> 或*://*/* 加上!important 标志

【解决方案2】：

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

【讨论】：