mootools_MooTools：按媒体设置样式

mootools

I'd bet one of the most used MooTools methods is the setStyle() method, which allows you to set CSS style declarations for an element. One of the limitations of MooTools' setStyle() method is that it sets the specific style for all medias. What if I want to set a style for only a specific media type? I've created a setStile() method that allows you to specify the media for which a style is set.

我敢打赌，最常用的MooTools方法之一是setStyle()方法，该方法可让您设置元素CSS样式声明。 MooTools的setStyle()方法的局限性之一是它为所有媒体设置特定的样式。 如果我只想为特定媒体类型设置样式怎么办？ 我创建了一个setStile()方法，该方法允许您指定为其设置样式的媒体。

View Demo 观看演示

MooTools JavaScript (The MooTools JavaScript)

Element.implement({
	'setStile': function(key,value,media) {
		var style = $$('style[media=' + media + ']')[0];
		if(!style) {
			style = new Element('style',{
				'type': 'text/css',
				'media': media
			});
			style.inject(document.head);
		}
		if(!this.get('id')) {
			this.set('id',$uid(this));
		}
		style.set('text',style.get('text') + '#' + this.get('id') + '{ ' + key + ':' + value + '; }');
		return this;
	},
	
	'setStiles': function(keyvalhash,media) {
		for(var key in keyvalhash) {
			this.setStile(key,keyvalhash[key],media);
		}
		return this;
	}
});

用法示例 (Example Usages)

$('nonoprint').setStile('color','#f00','print');
$('nonoprint').setStile('display','inline','print');
$('nonoprint').setStile('border','1px solid #00f','print');
$('nonoprint').setStiles({
	'background-color': '#fffea1',
	'font-weight': 'bold',
	'opacity': '.5'
},'print');

使用后HTML视图 (The Post-Use HTML View)

<style type="text/css" media="print">
#nonoprint{ color:#f00; }
#nonoprint{ display:inline; }
#nonoprint{ border:1px solid #00f; }
#nonoprint{ background-color:#fffea1; }
#nonoprint{ font-weight:bold; }
#nonoprint{ opacity:.5; }
</style>

View Demo 观看演示

Obviously, as you can see from the Post-Use HTML, this isn't an elegant solution but it works in all browsers I tested except Internet Explorer. Hopefully a better solution is presented in the future.

显然，从使用后HTML中可以看出，这不是一个很好的解决方案，但它在除Internet Explorer之外我测试过的所有浏览器中都可以使用。 希望将来会提供更好的解决方案。

翻译自: https://davidwalsh.name/mootools-style-media

mootools