Greasy Fork

Shined up real nice.

Greasy Fork is available in English.

Add_CSS

Makes it easier to style pages

Этот скрипт недоступен для установки пользователем. Он является библиотекой, которая подключается к другим скриптам мета-ключом // @require https://greasyfork.org/scripts/35370-add-css/code/Add_CSS.js?version=598682

Реклама
Автор
Dan WL (DanWL)
Оценки
0 0 0
Версия
1.3
Создан
Обновлён
Лицензия
Недоступно
Работает на
Все сайты

Описание скрипта от автора

Makes it easier to add CSS to pages.

Examples of usage:
To give #MyDiv a width of 100%-
Either:
AddCss(`'#MyDiv{width: 100%;}`);
Or:
AddCss(['#MyDiv', ['width', '100%']]);
This outputs
#MyDiv
{
	width: 100%;
}
To give #MyDiv a width of 100% and a height of 300px and give #MySecondDiv a width of 50%-
Either:
AddCss(`
MyDiv {
	width: 100%;
	height: 300px;
}

#MySecondDiv {
	width: 50%;
}`);
Or:
AddCss(['#MyDiv', ['width', '100%'], ['height', '300px'], '#MySecondDiv', ['width', '50%']]);
This outputs
#MyDiv
{
	width: 100%;
	height: 300px;
}

#MySecondDiv
{
	width: 50%;
}
To make #MyDiv display flex in a column layout-
Either:
AddCss(`#MyDiv {
	display: -webkit-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -moz-flex;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	-moz-flex-direction: column;
	flex-direction: column;
}`);
Or:
AddCss(['#MyDiv', ['display', 'flex', null], ['flex-direction', 'column', true]]);
This outputs
#MyDiv
{
	display: -webkit-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -moz-flex;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	-moz-flex-direction: column;
	flex-direction: column;
}
To make it so that when the maximum window with is 340px, make #MyDiv have a width of 100% and also give #MySecondDiv a width of 50%-
Either:
AddCss(`@media all and (max-width: 340px) {
	#MyDiv
	{
		width: 100%;
	}

	#MySecondDiv
	{
		width: 50%;
	}
}`);
Or
AddMediaQuery(340, ['#MyDiv', ['width', '100%'], '#MySecondDiv', ['width', '50%']]);
This outputs
@media all and (max-width: 340px)
{
	#MyDiv
	{
		width: 100%;
	}

	#MySecondDiv
	{
		width: 50%;
	}
}
getCss(document.getElementsByTagName('style')[0], '#MyDiv');//->string #MyDiv rules
getCss(document.getElementsByTagName('style')[0], '#MyDiv', 'width');//-> string #MyDiv width
modifyCss(document.getElementsByTagName('style')[0], 'append', getCss(document.getElementsByTagName('style')[0], '#MyDiv'), 'height: 300px;');//appends height: 300px; deceleration to #MyDiv->string document.getElementsByTagName('style')[0] HTML with deceleration appended; multiple decelerations can be made as a string
modifyCss(document.getElementsByTagName('style')[0], 'replace', getCss(document.getElementsByTagName('style')[0], '#MyDiv'), 'height: 300px;');//makes all #MyDiv decelerations be replaced with height: 300px; ->string document.getElementsByTagName('style')[0] HTML
modifyCss(document.getElementsByTagName('style')[0], 'empty', getCss(document.getElementsByTagName('style')[0], '#MyDiv'));//empties all #MyDiv decelerations i.e. #MyDiv{} ->string document.getElementsByTagName('style')[0] HTML
modifyCss(document.getElementsByTagName('style')[0], 'remove', getCss(document.getElementsByTagName('style')[0], '#MyDiv'));//removes the whole #MyDiv rule ->string document.getElementsByTagName('style')[0] HTML
modifyCssSelector(document.getElementsByTagName('style')[0], 'append', getCss(document.getElementsByTagName('style')[0], '#MyDiv'), '#MySecondDiv');//adds #MySecondDiv to #MyDiv selector in #MyDiv rule i.e. #MySecondDiv, #MyDiv->string document.getElementsByTagName('style')[0] HTML
modifyCssSelector(document.getElementsByTagName('style')[0], 'remove', getCss(document.getElementsByTagName('style')[0], '#MySecondDiv, #MyDiv'), '#MyDiv');//removes #MyDiv selector in #MySecondDiv, #MyDiv rule ->string document.getElementsByTagName('style')[0] HTML
modifyCssSelector(document.getElementsByTagName('style')[0], 'replace', getCss(document.getElementsByTagName('style')[0], '#MyDiv'), '#MySecondDiv');//replaces all selectors with #MySecondDiv ->string document.getElementsByTagName('style')[0] HTML