How to append style into head of any page using jquery instead of string?

Question

I try to append style into webpage through console tab of Chrome browser with the code like this.

$('head').append("<style>.hova {border-color: red !important;border-style: solid !important;border: 1px;}</style>");

The problem is it append like a String (return undefinded) in the header with some page like Google or StackOverFlow.
It works with another page like "http://jonraasch.com/blog/javascript-style-node" (return header of page)

Possible duplicate of [How to append a jQuery script to head tag](https://stackoverflow.com/questions/34004667/how-to-append-a-jquery-script-to-head-tag) — Hitmands, Apr 10 '18 at 11:31
Not every page has jQuery loaded, in which case either the brower-specific function, or a different defined function with `$` as name is used. — Kevin Drost, Apr 10 '18 at 11:32
Possible duplicate of [How can I add a CSS class to a page with jquery?](https://stackoverflow.com/questions/12219188/how-can-i-add-a-css-class-to-a-page-head-with-jquery) — Calvin Nunes, Apr 10 '18 at 11:33
Also some page, like Stack Overflow or JSFiddle use `iframe` to show your code snippet, so be aware you should check `iframe` head not page. — Pedram, Apr 10 '18 at 11:34
If you append it to every page, why not just put it in your style sheet? By using js, this style will not be applied until the js has loaded and run — Pete, Apr 10 '18 at 11:37
check if jQuery is loaded. type this in console - `typeof jQuery` should return "function". — Awol, Apr 10 '18 at 11:44
Thanks guy but it is not duplicate because the problem is the " — Sy Loc, Apr 11 '18 at 02:40
2022 - just tried this in Chrome with jQuery 3.6 and it "does the right thing" - works like a charm. Just FYI — YePhIcK, Aug 19 '22 at 17:15

Kevin Drost · Accepted Answer · 2018-04-10T11:40:37.080

2

You have to use the native functions instead of jQuery, if you want to do it to every page you visit:

var style = document.createElement('style');
style.innerText = '.hova {border-color: red !important;border-style: solid !important;border: 1px;}';
document.head.appendChild(style);

edited Apr 10 '18 at 11:40

answered Apr 10 '18 at 11:35

Kevin Drost

383
4
7

1

@Hitmands possibly the part where jQuery might not be available to the page – mplungjan Apr 10 '18 at 11:38
1

I would likely think textNode or innerText was safer than innerHTML in this case – mplungjan Apr 10 '18 at 11:39
@Hitmands, the OP is trying to use the code on a random page he visits, which is not possible if jQuery is not loaded. – Kevin Drost Apr 10 '18 at 11:39
then propose a change to the question, but always stick to the op. – Hitmands Apr 10 '18 at 11:40
Thank you all, this is the correct answer. The problem because i using append with a "String of style". So, some page with know it is a String instead of Element – Sy Loc Apr 11 '18 at 02:34

Awol · Answer 2 · 2018-04-10T11:35:16.847

0

$( "<style>body { background: black; }</style>" ).appendTo( "head" )

use appendTo like this.

edited Apr 10 '18 at 11:35

answered Apr 10 '18 at 11:33

Awol

169
6

It does not work like my script because some page missing jquery. The script of Kevin Drost is the best answer. – Sy Loc Apr 13 '18 at 02:47

score 0 · Answer 3 · answered Apr 10 '18 at 11:35

If you want your styles to be treated as an element, you need to put in an HTML element object. Since you're just putting in a string, it thinks you're doing something like adding text to a <p> element. Instead, try the following:

$("<style>.hova {border-color: red !important;border-style: solid !important;border: 1px;}</style>").appendTo("head");

Hasnain Bukhari · Answer 4 · 2018-04-10T11:37:57.060

0

You can do it like this and also you add multiple css classes

var h = document.getElementsByTagName('head').item(0);
var s = document.createElement("style");
s.type = "text/css"; 
s.appendChild(document.createTextNode(".hova {border-color: red !important;border-style: solid !important;border: 1px;}");
h.appendChild(s);

edited Apr 10 '18 at 11:37

answered Apr 10 '18 at 11:37

Hasnain Bukhari

458
2
6
23

@Hitmands possibly the part where jQuery might not be available to the page – mplungjan Apr 10 '18 at 11:38
In header part, jQuery will not be available. – Hasnain Bukhari Apr 10 '18 at 11:46

score -2 · Answer 5 · answered Apr 10 '18 at 11:34

-2

you can use this:

$('head').css({
   'color' : 'red !important',
   'width' : '30px',
   'height' : '10px'
});

answered Apr 10 '18 at 11:34

oma

1,804
12
13

Assuming jQuery is available and the page you look at is the document you change – mplungjan Apr 10 '18 at 11:35

How to append style into head of any page using jquery instead of string?

5 Answers5