Javafx Webengine - Overwriting A Website's Stylesheet With (local) Files

I'd like to customise the appearance of a website that I am loading, so I created a little test.css file that does nothing but changing the look of all table rows: tr { height:

Solution 1:

First of I have to state, that I hope you know what you are doing, as these things can seriously damage a web site. So here is what you can do:

You grab the Document from the WebEngine, retrieve the head element and add a style child element to it, containing the src location of the stylesheet you want to add.

Documentdoc= webView.getEngine().getDocument();
URLscriptUrl= getClass().getResource(pathToAttachedDocument); // pathToAttachedDocument = CSS file you want to attachStringcontent= IOUtils.toString(scriptUrl); // Use Apache IO commons for convenianceElementappendContent= doc.createElement("style");
appendContent.appendChild(doc.createTextNode(content));
doc.getElementsByTagName("head").item(0).appendChild(appendContent);

By the way, JavaScript can be added in a similar way, it's just 'script' instead of 'style'

Solution 2:

I would do like this to ADD or REPLACE any rules :

Stringcss= getFileAsString("style.css");
Documentdoc= webEngine.getDocument();
Elemente= doc.getElementById("my_style");
e.setTextContent(css);

... given a

<styleid="my_style"></style>

tag in the HTML document.

Solution 3:

setUserStyleSheetLocation()was designed for that very purpose: to let the user of the web page, style it as they want.

Usage:

webEngine.setUserStyleSheetLocation(styleSheetURL.toString());