How to disable webkit-text-size-adjust with JavaScript


Tags: javascript,css,google-chrome-extension

Problem :

I'm trying to build a Chrome extension that will automatically disable the webkit-text-size-adjust CSS rule on LinkedIn. This is so I can get the text to zoom when I zoom on the page.

Using Chrome's developer tools in the Elements Styles window, I can change the webkit-text-size-adjust from "none" to "0", and this lets the text change size when I zoom.

However, I can't figure out how to disable this rule with JavaScript. I have written a Chrome extension that executes a function when I visit linkedin.com/* but I need to write a function to remove/modify the webkit-text-size-adjust rule.

I've tried a few things, but they don't work.

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

I've also tried recursively going through each childNode from document.body and using removeProperty to turn it off, but this doesn't work for me either.

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);

So how could I go about removing this rule with javascript? I'm no expert on CSS or JavaScript, so I imagine I'm missing something simple...



Solution :

Inject the following CSS, which should force the browser to use the style:

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

The !important flag causes the declaration to take the highest available precedence. Add the custom styles to a page via the manifest file:

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

    CSS Howto..

    How to style CGI python with CSS?

    Adding a description to a css image slideshow

    How to separate html header and content with css and make the content scrollable

    How to reference css in actionlink?

    CSS: How to make this topheader?

    How to use top middle and center inside a div

    How to remove the arrows in a scroll bar through CSS

    How to position and style blockquote in css

    How do I style my Django forms fields?

    How to create a slanting border with css

    Android App with HTML/CSS/jQuery. [How] Can it be done?

    How can I get CSS codes in a style element? [duplicate]

    How to reduce the wiDth of dropdown-menu?

    CSS: How to align buttons and text horizontally

    How to Decrease Image Brightness in CSS

    How do I get a floating footer to stick to the bottom of the viewport in IE 6?

    Ideas with how to draw a specific large amount of circles on a page using a loop

    How To Make iPhone6 Plus Landscape Mode Work Better with Bootstrap3?

    How to use CSS absolute position inside a scrollable div element

    How to have a color change animation on a button outline?

    How to remove space between bannner and content in wordpress theme?

    How to fade loop background images?

    CSS Chevron Showing Unwanted Rectangle

    How JQuery can parse colors in text?

    How can I set first element to display: none;?

    How to override default styles in GWT 2.3?

    How to create CSS heart? / Why is this CSS creating a heart shape?

    How do you apply diferent colors from diferent css rules to the same object?

    How can I use CSS to keep content in its own column?

    HTML/CSS: how to expand a table row i only one direction?