Skip to content

Instantly share code, notes, and snippets.

@KaanGaming
Created December 19, 2020 19:50
Show Gist options
  • Save KaanGaming/d6282f0296cab11e46f06bcceda9828f to your computer and use it in GitHub Desktop.
Save KaanGaming/d6282f0296cab11e46f06bcceda9828f to your computer and use it in GitHub Desktop.
Make HTML attributes act as CSS atttibutes using this script (Pointers W.I.P!)
/*
Download this file and add this javascript file ro your HTML file using:
<script src="./cssatt.js" defer></script>
The script gets executed when the rest of the page finishes loading
BY @KaanGaming in GitHub
To assign settings, create another script tag and create a JSON object named "CSSAttSettings".
Properties:
• "updateinterval": The interval the attributes are loaded. If set to 0 it never updates on its own unless LoadCSS() is called.
• "keepatt": Keep attributes after loading CSS or destroy them. If set to 'false' then it will destroy all of the attributes and keep style attribute then mark it as "disattributed". It may be advised to set it to 'true' because some of the *actual* HTML attributes might break the tag itself.
:
Tag:
<css> - All attributes added to this tag will be applied as CSS.
---
POINTERS ARE NOT SUPPORTED YET!
Adding pointers:
If there is an attribute that's either too long to type or cannot be typed in properly, use the function AddPointer(p, r) to add a pointer to the attribute you want.
'p' is pointer name, 'r' is the CSS rule.
RemovePointer(p) to remove a pointer.
*/
// CRITICALTODO: SUPPORT POINTERS
var pointers = {};
function AddPointer(p, r) {
pointers[String(p)] = r;
}
function RemovePointer(p) {
pointers[String(p)] = null;
}
function LoadCSS() {
let belms = document.getElementsByTagName("css");
for (i=0;i<belms.length;i++){
let confirmation = false;
if (belms[i].tagName == "CSS") confirmation = true;
if (confirmation) {
let htmlatt = belms[i].attributes;
let resultstyle = "";
for(ii=0;ii<htmlatt.length;ii++){
var typ = document.createAttribute("disattributed");
if (htmlatt[ii].name == "disattributed") break;
resultstyle += htmlatt[ii].name + ":" + htmlatt[ii].value + ";";
if (CSSAttSettings.keepatt != true) {
if (htmlatt[ii].name != "style") htmlatt.removeNamedItem(htmlatt[ii].name);
htmlatt.setNamedItem(typ);
}
}
document.getElementsByTagName("css")[i].style = resultstyle;
}
}
}
setTimeout(OnLoadCSS, 1000);
// DO NOT CALL THIS FUNCTION!!!!! ONLY CALL THIS ONCE THE WHOLE PAGE IS LOADED!! THIS IS INITIALIZER FUNCTION
function OnLoadCSS() {
console.log(CSSAttSettings);
if (CSSAttSettings.updateinterval > 0) {
setInterval(LoadCSS, CSSAttSettings.updateinterval);
}
LoadCSS();
console.log("CSS Attributes loaded");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment