GM addStyle: Difference between revisions

From GreaseSpot Wiki
Jump to navigationJump to search
(→‎Examples: cross-browser, eliminate redundant parenthetical)
(link to @require helper)
 
(19 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{underscore|title=GM_addStyle}}
{{DISPLAYTITLE:GM_addStyle}}  
__NOTOC__
{{Greasemonkey Manual TOC}}


== Description ==
As of Greasemonkey 4.0, this method has been removed.


This [[API_reference|API]] method adds a string of CSS to the document.
You can `@require` a helper script to provide the same functionality, for example [https://gist.github.com/arantius/eec890c9ce4ff2f7abee896c0bba664d gm-addstyle.js].
 
It creates a new <code><style></code> element, adds the given CSS to it, and inserts it into the <code><head></code>.
 
[[#Examples|Examples]] | [[#Notes|Notes]]
 
== Syntax ==
 
'''GM_addStyle(''' ''css'' ''')'''
 
:Value: Function
:Returns: undefined
:Compatibility: [[Version_history#0.6.1|Greasemonkey 0.6.1+]]
 
:{| cellpadding="5" style="border-style:solid; background:#FFFFE0;"
|+ Parameters
!style="background:#CC9900;"|'''Properties'''
|-
| <code><span style="background:#FFFFE0;">[[#css |css]]</span></code>
|}
:* All properties are optional except [[#css|css]].
 
[[#top|top]]
=== Properties ===
----
==== <code>css</code> ====
:Value: String
:Usage: <code>'''css''' = "body { color:red }";</code>
 
[[#top|top]] | [[#Syntax|back]]''
 
== Examples ==
{{Core samp |1=<pre style="border: none; margin: inherit;">
GM_addStyle("body { color: white; background-color: black } img { border: 0 }");
</pre>}}
 
[[#top|top]]
 
Spanned over multiple lines using E4X:
{{Good samp |1=<pre style="border: none; margin: inherit;">
GM_addStyle(<><![CDATA[
  body { color: white; background-color: black }
  img { border: 0 }
  .footer { width: 875px; }
]]></>.toString());
</pre>}}
 
[[#top|top]]
 
As of yet, some browsers (such as Google Chrome) do not support E4X, so the following may be used instead. Simply ensure that every line break in between is preceded by a backslash character "\".
{{Good samp |1=<pre style="border: none; margin: inherit;">
GM_addStyle("body { color: white; background-color: black }\
  img { border: 0 }\
  .footer { width: 875px; }");
</pre>}}
 
[[#top|top]]
 
== Notes ==
Add <code>!important</code> at the end of the code to override an existing value.
 
[[#top|top]]
 
[[Category:API_Reference|A]]

Latest revision as of 15:12, 8 November 2023


As of Greasemonkey 4.0, this method has been removed.

You can `@require` a helper script to provide the same functionality, for example gm-addstyle.js.