Я работаю над динамическим c HTML документом, который должен изменить свой стиль на основе записей в Google Sheets. Пока он просто загружает данные JSON. Я искал способ стилизовать CSS, чтобы я мог изменить его на лету. Кто-нибудь может указать мне правильное направление?
<!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 adTekst = ourData.feed.entry[6].gs$cell.inputValue; var achtergrondKleur = ourData.feed.entry[7].gs$cell.inputValue; var tekstKleur = ourData.feed.entry[8].gs$cell.inputValue; console.log(adTekst); console.log(achtergrondKleur); console.log(tekstKleur); document.getElementById('testoutput').innerHTML = adTekst + " " + achtergrondKleur + " " + tekstKleur; }; ourRequest.send(); </script> </head> <body> <div id="testoutput"></div> </body> </html>
Да, вы также можете указать c css для всех столбцов, используя теги html. Смотрите фрагмент ниже
<!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/1dLbBxSuyGxbG3z-eJz2X_rFhq3a1kQ6TRlxJqHvstLQ/1/public/full?alt=json') ourRequest.onload = function() { var ourData = JSON.parse(ourRequest.responseText); var adTekst = ourData.feed.entry[6].gs$cell.inputValue; var achtergrondKleur = ourData.feed.entry[7].gs$cell.inputValue; var tekstKleur = ourData.feed.entry[8].gs$cell.inputValue; console.log(adTekst); console.log(achtergrondKleur); console.log(tekstKleur); document.getElementById('testoutput').innerHTML ='<span>'+adTekst+'</span>'+ " " + '<span>'+achtergrondKleur+'</span>' + " " + tekstKleur; }; ourRequest.send(); </script> </head> <style> div#testoutput { color: red;} div#testoutput span { color: blue;} div#testoutput span:first-child {color: aqua;} </style> <body> <div id="testoutput"></div> </body> </html>
Вы можете дать цвет или дизайн согласно вашему требованию.
Вы можете сделать это, переключая классы, используя javascript.
document.getElementById('testoutput').classList.toggle('myClass');
Другой способ - изменить отдельные CSS свойства
document.getElementById('testoutput').style.backgroundColor = 'RED';