JavaScript:Библиотеки/p5.dom/Класс p5.Element/style(): различия между версиями
Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
Myagkij (обсуждение | вклад) Нет описания правки |
Нет описания правки |
||
| (не показана 1 промежуточная версия этого же участника) | |||
| Строка 4: | Строка 4: | ||
{{Myagkij-редактор}} | {{Myagkij-редактор}} | ||
= style() <ref>[https://p5js.org/reference/#/p5.Element/style p5js.org - style()]</ref>= | = style() <ref>[https://p5js.org/reference/#/p5.Element/style p5js.org - style()]</ref>= | ||
| Строка 14: | Строка 14: | ||
Чтобы использовать эту функцию, необходимо подключить библиотеку p5.dom. Для этого в заголовок своего файла «index.html» впишите следующее: | Чтобы использовать эту функцию, необходимо подключить библиотеку p5.dom. Для этого в заголовок своего файла «index.html» впишите следующее: | ||
<syntaxhighlight lang="javascript | <syntaxhighlight lang="javascript"> | ||
<script language="javascript" type="text/javascript" src="path/to/p5.dom.js"></script> | <script language="javascript" type="text/javascript" src="path/to/p5.dom.js"></script> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Строка 20: | Строка 20: | ||
==Синтаксис== | ==Синтаксис== | ||
<syntaxhighlight lang="javascript | <syntaxhighlight lang="javascript"> | ||
style(property, [value], [value2], [value3]) | style(property, [value], [value2], [value3]) | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Строка 26: | Строка 26: | ||
==Параметры== | ==Параметры== | ||
<syntaxhighlight lang="javascript | <syntaxhighlight lang="javascript"> | ||
property – свойство, для которого нужно задать значение. Тип данных – String | property – свойство, для которого нужно задать значение. Тип данных – String | ||
value – значение, которое нужно задать эту свойству. Тип данных – String, number, p5.Color (для свойств rotate и translate – только String и number) | value – значение, которое нужно задать эту свойству. Тип данных – String, number, p5.Color (для свойств rotate и translate – только String и number) | ||
| Строка 35: | Строка 35: | ||
==Возвращаемое значение== | ==Возвращаемое значение== | ||
<syntaxhighlight lang="javascript | <syntaxhighlight lang="javascript"> | ||
Если не задано никакого значения или объекта p5.Element, возвращает текущее значение свойства. Тип данных – String, объект, p5.Element. | Если не задано никакого значения или объекта p5.Element, возвращает текущее значение свойства. Тип данных – String, объект, p5.Element. | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Строка 43: | Строка 43: | ||
===№1=== | ===№1=== | ||
<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS | <syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS"> | ||
var myDiv = createDiv('I like pandas.'); // 'я люблю панд' | var myDiv = createDiv('I like pandas.'); // 'я люблю панд' | ||
myDiv.style('font-size', '18px'); | myDiv.style('font-size', '18px'); | ||
| Строка 51: | Строка 51: | ||
===№2=== | ===№2=== | ||
<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS | <syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS"> | ||
var col = color(25, 23, 200, 50); | var col = color(25, 23, 200, 50); | ||
var button = createButton('button'); | var button = createButton('button'); | ||
| Строка 60: | Строка 60: | ||
===№3=== | ===№3=== | ||
<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS | <syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS"> | ||
var myDiv = createDiv('I like lizards.'); | var myDiv = createDiv('I like lizards.'); | ||
// 'мне нравятся ящерицы' | // 'мне нравятся ящерицы' | ||
| Строка 69: | Строка 69: | ||
===№4=== | ===№4=== | ||
<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS | <syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS"> | ||
var myDiv; | var myDiv; | ||
function setup() { | function setup() { | ||
Текущая версия от 13:10, 18 июня 2023
Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.
style() [1]
Описание
Присваивает заданное значение заданному CSS-свойству стиля элемента. Свойство – это первый параметр, а значения – это второй, третий и так далее параметры. Если задан только один параметр, style() вернет значение заданного свойства, но если первый параметр задан при помощи синтаксиса CSS (например, так: 'text-align:center'), то style() обработает его так, будто это несколько параметров. Если первый параметр – это 'rotate', 'translate' или 'position', то следующие параметры должны иметь тип number. Это может выглядеть примерно так: ('translate', 10, 100, 50).
Чтобы использовать эту функцию, необходимо подключить библиотеку p5.dom. Для этого в заголовок своего файла «index.html» впишите следующее:
<script language="javascript" type="text/javascript" src="path/to/p5.dom.js"></script>
Синтаксис
style(property, [value], [value2], [value3])
Параметры
property – свойство, для которого нужно задать значение. Тип данных – String
value – значение, которое нужно задать эту свойству. Тип данных – String, number, p5.Color (для свойств rotate и translate – только String и number)
value2 – может понадобиться для свойств position и translate. Тип данных – String, number
value3 – может понадобиться для свойства translate. Тип данных – String, number
Возвращаемое значение
Если не задано никакого значения или объекта p5.Element, возвращает текущее значение свойства. Тип данных – String, объект, p5.Element.
Пример
№1
var myDiv = createDiv('I like pandas.'); // 'я люблю панд'
myDiv.style('font-size', '18px');
myDiv.style('color', '#ff0000');
№2
var col = color(25, 23, 200, 50);
var button = createButton('button');
button.style('background-color', col);
button.position(10, 10);
№3
var myDiv = createDiv('I like lizards.');
// 'мне нравятся ящерицы'
myDiv.style('position', 20, 20);
myDiv.style('rotate', 45);
№4
var myDiv;
function setup() {
background(200);
myDiv = createDiv('I like gray.'); // 'мне нравится серый цвет'
myDiv.position(20, 20);
}
function draw() {
myDiv.style('font-size', mouseX + 'px');
}
