with w3schools variable usar dinamicas declaring color change javascript jquery css css-variables

w3schools - Acceder a una propiedad personalizada de CSS(también conocida como variable CSS) a través de JavaScript



usar variable javascript en css (3)

La solución nativa

Los métodos estándar para obtener / establecer variables CSS3 son .setProperty() y .getPropertyValue() .

Si sus Variables son Globales (declaradas en :root ), puede usar lo siguiente para obtener y establecer sus valores.

// setter document.documentElement.style.setProperty(''--myVariable'', ''blue''); // getter document.documentElement.style.getPropertyValue(''--myVariable'');

Sin embargo, el captador solo devolverá el valor de una var, si se ha establecido, usando .setProperty() . Si se ha establecido mediante la declaración CSS, volverá undefined . Compruébalo en este ejemplo:

let c = document.documentElement.style.getPropertyValue(''--myVariable''); alert(''The value of --myVariable is : '' + (c?c:''undefined''));

:root{ --myVariable : red; } div{ background-color: var(--myVariable); }

<div>Red background set by --myVariable</div>

Para evitar ese comportamiento inesperado, debe utilizar el método getComputedStyle() antes de llamar a .getPropertyValue() . El captador verá entonces esto:

getComputedStyle(document.documentElement,null).getPropertyValue(''--myVariable'');

En mi opinión, el acceso a las variables CSS debería ser más simple, rápido, intuitivo y natural ...

Mi enfoque personal

Implementé CSSGlobalVariables una pequeña bruja auxiliar de JavaScript (<3kb) que detecta y empaqueta automáticamente en un Objeto, todas las variables globales CSS activas en un documento, para facilitar el acceso y la manipulación .

// get the document CSS global vars let cssVar = new CSSGlobalVariables(); // set a new value to --myVariable cssVar.myVariable = ''red''; // get the value of --myVariable console.log( cssVar.myVariable );

Cualquier cambio aplicado a las propiedades del Objeto, se traduce automáticamente a las variables CSS.

Disponible en : https://github.com/colxi/css-global-variables

¿Cómo obtiene y establece las propiedades personalizadas de CSS (a las que se accede con var(…) en la hoja de estilo) usando JavaScript (simple o jQuery)?

Aquí está mi intento fallido: hacer clic en los botones cambia la propiedad habitual font-weight , pero no la propiedad personalizada --mycolor :

<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <style> body { --mycolor: yellow; background-color: var(--mycolor); } </style> </head> <body> <p>Let''s try to make this text bold and the background red.</p> <button onclick="plain_js()">Plain JS</button> <button onclick="jQuery_()">jQuery</button> <script> function plain_js() { document.body.style[''font-weight''] = ''bold''; document.body.style[''--mycolor''] = ''red''; }; function jQuery_() { $(''body'').css(''font-weight'', ''bold''); $(''body'').css(''--mycolor'', ''red''); } </script> </body> </html>


El siguiente ejemplo ilustra cómo se puede cambiar el fondo usando JavaScript o jQuery, aprovechando las propiedades CSS personalizadas conocidas también como variables CSS (lea más developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables ). Bonificación: el código también indica cómo se puede usar una variable CSS para cambiar el color de la fuente.

function plain_js() { // need DOM to set --mycolor to a different color d.body.style.setProperty(''--mycolor'', ''red''); // get the CSS variable ... bodyStyles = window.getComputedStyle(document.body); fontcolor = bodyStyles.getPropertyValue(''--font-color''); //get // ... reset body element to custom property''s new value d.body.style.color = fontcolor; d.g("para").style["font-weight"] = "bold"; this.style.display="none"; }; function jQuery_() { $("body").get(0).style.setProperty(''--mycolor'',''#f3f''); $("body").css("color",fontcolor); $("#para").css("fontWeight","bold"); $(this).css("display","none"); } var bodyStyles = null; var fontcolor = ""; var d = document; d.g = d.getElementById; d.g("red").addEventListener("click",plain_js); d.g("pink").addEventListener("click",jQuery_);

:root { --font-color:white; --mycolor:yellow; } body { background-color: var(--mycolor); color:#090; } #para { font: 90% Arial,Helvetica; font-weight:normal; } #red { background:red; } #pink { background:#f3f; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <p id="para">Let''s try to make the background red or pink and change the text to white and bold.</p> <button id="red">Red</button> <button id="pink">Pink</button>

Tenga en cuenta que con jQuery, para establecer la propiedad personalizada en un valor diferente, esta response realmente contiene la respuesta. Utiliza el método get() del elemento body que permite el acceso a la estructura DOM subyacente y devuelve el elemento body, facilitando así el código que establece la propiedad personalizada --mycolor a un nuevo valor.


Puede usar document.body.style.setProperty(''--name'', value); :

var bodyStyles = window.getComputedStyle(document.body); var fooBar = bodyStyles.getPropertyValue(''--foo-bar''); //get document.body.style.setProperty(''--foo-bar'', newValue);//set

Más información here .