Firefox:Dive Into Greasemonkey/4.13. Adding CSS styles

Mozilla中文Wiki

您的位置：Dive Into Greasemonkey → 公用模式 → 添加 CSS 样式

4.13. 添加 CSS 样式

我常常发现需要给一个页面添加我自己的CSS样式。您可以添加新样式，覆盖掉已有的样式;或者用户脚本新插入元素的特定样式。

例子：放大段落文字

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

addGlobalStyle('p { font-size: large ! important; }');

这个函数有一个参数，一个字符串，也就是您要插入页面中的样式规则。它一成不变地把把您的样式规则插入到页面<head>段的<style>元素中。Firefox自动识别变更，解释样式规则，并且把它们应用到页面中。您可以把包含不同的样式规则包含到单个的函数调用中；也可以把它们连到一起作为一个字符串然后同时发送给函数。

您可以使用 addGlobalStyle 函数样式化您插入到页面中的元素，或者原页面中已有的元素。然而，如果您正要样式化已有的元素，您应该在您定义的样式规则中使用 ! 重点关键字(important keyword)，以确保您的样式覆盖了原页面已有的规则。

[编辑]

实例

Access Bar (http://diveintogreasemonkey.org/download/accessbar.user.js)
Aint It Readable (http://diveintogreasemonkey.org/download/aintitreadable.user.js)
BetterDir (http://diveintogreasemonkey.org/download/betterdir.user.js)
Butler (http://diveintogreasemonkey.org/projects/butler/butler.user.js)
CDReadable (http://diveintogreasemonkey.org/download/cdreadable.user.js)
LIP (http://diveintogreasemonkey.org/download/lip.user.js)

← 插入外部图片

取得元素样式 →

取自"http://wiki.mozcn.org/index.php/Firefox:Dive_Into_Greasemonkey/4.13._Adding_CSS_styles"

本页面已经被浏览2202次。最后更改14:00 2005年11月19日. 本站内容在创作共用署名-非商业用途-保持一致条款下发布。