How to access and change the body of HTML from within P5

djneils98 · December 2016

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

GoToLoop · December 2016

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

djneils98 · December 2016

thanks for this - will investigate

GoToLoop · December 2016

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

djneils98 · December 2016

many thanks - got it working with the first examples you gave

Howdy, Stranger!

Categories

In this Discussion

How to access and change the body of HTML from within P5

Answers