JavaScript:Библиотеки/p5.dom/Класс p5.Element/style()

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску

Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.



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');
}

См.также

Внешние ссылки