I'm currently working on an HTML document with dynamic content that needs to adjust its styling based on data from Google Sheets. I've successfully loaded the JSON data, but I'm struggling to figure out how to dynamically change the CSS. Can anyone provide guidance on how to achieve this?
<!doctype html>
<html lang="en>
<head>
<meta charset="utf-8">
<title>Google Sheets</title>
<style>
</style>
<script type="text/javascript">
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://spreadsheets.google.com/feeds/cells/1d3z-eJz2X_rFhq3a1kQ6TRlxJqHvstLQ/1/public/full?alt=json')
ourRequest.onload = function () {
var ourData = JSON.parse(ourRequest.responseText);
var adText = ourData.feed.entry[6].gs$cell.inputValue;
var backgroundColor = ourData.feed.entry[7].gs$cell.inputValue;
var textColor = ourData.feed.entry[8].gs$cell.inputValue;
console.log(adText);
console.log(backgroundColor);
console.log(textColor);
document.getElementById('testoutput').innerHTML = adText + " " + backgroundColor + " " + textColor;
};
ourRequest.send();
</script>
</head>
<body>
<div id="testoutput"></div>
</body>
</html>