Created
July 7, 2024 17:48
-
-
Save chrisgervang/4b33c14466c050da4bd0276ae45d4ed6 to your computer and use it in GitHub Desktop.
CSS test for https://github.com/visgl/deck.gl/pull/8991
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| :root { | |
| --main-color: black; | |
| } | |
| #test1 { | |
| background-color: var(--main-color); | |
| font-size: 12px; | |
| } | |
| #test2 { | |
| background-color: var(--main-color); | |
| font-size: 12px; | |
| } | |
| #test3 { | |
| background-color: var(--main-color); | |
| font-size: 12px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="test1">Test Element1</div> | |
| <div id="test2">Test Element2</div> | |
| <div id="test3">Test Element3</div> | |
| <script> | |
| function setStyle1(element, property, value) { | |
| if (property.startsWith('--')) { | |
| // Assume CSS variable | |
| element.style.setProperty(property, value); | |
| } else { | |
| // Assume camelCase | |
| element.style[property] = value; | |
| } | |
| } | |
| function setStyle2(element, property, value) { | |
| const kebabCaseProperty = property.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); | |
| element.style.setProperty(kebabCaseProperty, value); | |
| } | |
| function setStyle3(element, property, value) { | |
| if (property.startsWith('--')) { | |
| // Apply CSS variable | |
| element.style.setProperty(property, value); | |
| } else if (property.includes('-')) { | |
| // Convert kebab-case to camelCase | |
| const camelCaseProperty = property.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase()); | |
| element.style[camelCaseProperty] = value; | |
| } else { | |
| // Assume camelCase | |
| element.style[property] = value; | |
| } | |
| } | |
| const element1 = document.getElementById('test1'); | |
| setStyle1(element1, '--main-color', 'blue'); // CSS variable | |
| setStyle1(element1, 'background-color', 'red'); // kebab-case | |
| setStyle1(element1, 'fontSize', '24px'); // camelCase | |
| const element2 = document.getElementById('test2'); | |
| setStyle2(element2, '--main-color', 'blue'); // CSS variable | |
| setStyle2(element2, 'background-color', 'red'); // kebab-case | |
| setStyle2(element2, 'fontSize', '24px'); // camelCase | |
| const element3 = document.getElementById('test3'); | |
| setStyle3(element3, '--main-color', 'blue'); // CSS variable | |
| setStyle3(element3, 'background-color', 'red'); // kebab-case | |
| setStyle3(element3, 'fontSize', '24px'); // camelCase | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment