We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Newbie here - been playing with P5 and the DOM - adding DOM elements and changing their properties in code. The one thing i'm stuck on is accessing and modifying the background colour of the webpage. iI tried adding an ID of 'bod' to the body tag in the index file. That lets me target it in CSS and change the colour. But when I try this instead in the P5 code it doesn't work: var b; b = document.getElementById("bod"); b.style("background-color","#FFFF22");
the first line doesn't stop the program executing but the second one does. Can anyone point me in the right direction? thanks
Answers
Maybe try out Document's bgColor property:
https://developer.Mozilla.org/en-US/docs/Web/API/Document/bgColor
Examples:
document.bgColor = 'orange';
document.bgColor = '#00ffff';
Or use select() to search for tag
<body>
within DOM. Then set its bgColor prop via attribute() method:http://p5js.org/reference/#/p5/select
Examples:
select('body').attribute('bgColor', 'red');
select('body').attribute('bgColor', '#FF0');
thanks for this - will investigate
P.S.: style(), attribute() and other methods from "p5.dom" library only work over a p5.Element object:
However, vanilla JS Document's getElementById() returns an Element object instead:
Actually, all p5.js' p5.Element objects got an HTMLElement object internally.
Class p5.Element is nothing more than a wrapper for interface HTMLElement w/ some extras. ;)
If by chance we wish to access the internal HTMLElement, use property elt for it: *-:)
http://p5js.org/reference/#/p5.Element/elt
many thanks - got it working with the first examples you gave