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 .