Confusing line in style() reference page

[cammykaz]

Increasing Access

The description in the style() reference page is worded in a confusing way, especially for beginners. Improving the clarity would make it more accessible.

Most appropriate sub-area of p5.js?

Reference

Feature request details

Specifically confusing is the line: "however, if a single argument is given in CSS syntax ('text-align:center'), .style() sets the CSS appropriately."

Full description as it is currently:

Sets the given style (CSS) property (1st arg) of the element with the given value (2nd arg). If a single argument is given, .style() returns the value of the given property; however, if a single argument is given in CSS syntax ('text-align:center'), .style() sets the CSS appropriately.

[limzykenneth]

Hi @cammykaz, thanks for filing this. Do you have a suggestion on how we can better rephrase this description?

[cammykaz]

Hi @limzykenneth, no I don't unfortunately because I am a beginner myself and not sure if I fully understand it.

Let me try to explain my confusion more:

To me for example it makes it seem that you use the CSS syntax in JavaScript which I thought was not true.

Also I get the first part of the sentence talking about how just the one argument means that you are retrieving the value. I just really have no idea what is meant by the part of that sentence after the semicolon.

Is it actually some additional point? And if so is it included in the examples section on that page? If not then adding an example would probably help.

Cheers! Cam

[limzykenneth]

To me for example it makes it seem that you use the CSS syntax in JavaScript which I thought was not true.

You can use CSS-style syntax with the .style() function such as text-align:center or position:fixed for example just not the full CSS syntax that includes the CSS selectors or curly brackets.

This all means something like the following are equivalent:

let myDiv = createDiv('I like pandas.');
myDiv.style('font-size', '18px');
myDiv.style('color', '#ff0000');
myDiv.position(0, 0);

let myDiv = createDiv('I like pandas.');
myDiv.style('font-size: 18px');
myDiv.style('color: #ff0000');
myDiv.position(0, 0);