¿Hay alguna forma de crear propiedades CSS personalizadas en JavaScript?
Nota: este código no funcionará, solo muestra el tipo de cosas que estoy buscando.
Estoy buscando algo como esto: (eso no significa exactamente esto, solo la idea general)
JavaScript:
createCSSProperty("bg", function(property, change, attr1) { change.setBackground(attr1, function fail(data) { //This function would trigger if the value was invalid property.fail(data); //This would throw an warning that the property can't load }); }HTML:
<div style="width: 40px; height: 40px; bg: #f00;">Red Background</div>El resultado aparecería como lo hace en este fragmento
<div style="width: 40px; height: 40px; background: #f00;">Red Background</div> Como complemento a esta pregunta, ¿qué pasa con las funciones CSS personalizadas, los valores CSS (que tienen un valor que depende de una o más cosas, como los valores no unset y inherit ), los selectores CSS y tal vez incluso las unidades CSS?
Siento que una forma más fácil de agregar CSS a divs en JavaScript sería usar las funciones .id o .classList.add .
Archivo JavaScript:
//Creates the div var div = document.createElement("div"); //Sets the text in the div div.innerHTML = "Red Background"; //Applies Id and Class to the div div.id = "customCSSId"; div.classList.add("containers"); //Adds the div to the html page document.body.appendChild(div);Archivo CSS:
#customCSSId{ width: 40px; height: 40px; } .containers { background: #f00; }