4.13. 添加 CSS 样式 [深入浅出 Greasemonkey]

4.13. 添加 CSS 样式

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

例 4.16. 放大段落文字

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 关键字，保证您的样式覆盖原页面中已定义的规则。

实例

参见

案例：Ain't It Readable

← 在没有服务器的情况下添加图片

获取元素样式 →