CSS Αλλαγή μεταβλητών με JavaScript

Πίνακας περιεχομένων

Αλλαγή μεταβλητών με JavaScript

Οι μεταβλητές CSS έχουν πρόσβαση στο DOM, πράγμα που σημαίνει ότι μπορείτε να τις αλλάξετε με JavaScript.

Ακολουθεί ένα παράδειγμα για το πώς μπορείτε να δημιουργήσετε ένα σενάριο για εμφάνιση και αλλαγή της μεταβλητής --blue από το παράδειγμα που χρησιμοποιήθηκε στις προηγούμενες σελίδες. Προς το παρόν, μην ανησυχείτε αν δεν είστε εξοικειωμένοι με το JavaScript. Μπορείς να μάθεις περισσότερα για το JavaScript στο Οδηγό JavaScript:

Παράδειγμα

 <script>
// Get the root element
var r = document.querySelector(':root');
  
// Create a function for getting a variable value
function 
  myFunction_get() {
  // Get the styles (properties and values) for the 
  root
  var rs = getComputedStyle(r);
  // Alert the value of 
  the --blue variable
  alert("The value of --blue is: " + 
  rs.getPropertyValue('--blue'));
}
// Create a function for setting a 
  variable value
function myFunction_set() {
  // Set the value of 
  variable --blue to another value (in this case "lightblue")
  
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

.container button  {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
</style>

<script>
// Get the root element
var r = document.querySelector(':root');

// Create a function for getting a variable value
function myFunction_get() {
  // Get the styles (properties and values) for the root
  var rs = getComputedStyle(r);
  // Alert the value of the --blue variable
  alert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}

// Create a function for setting a variable value
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>
</head>
<body>

<h1>Get and Change CSS Variable With JavaScript</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>
<br>

<button type="button" onclick="myFunction_get()">Get CSS Variable with JavaScript</button>
<button type="button" onclick="myFunction_set()">Change CSS Variable with JavaScript</button>

</body>
</html>

Υποστήριξη προγράμματος περιήγησης

Οι αριθμοί στον πίνακα καθορίζουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως το Συνάρτηση var().

Function
var()	49.0	15.0	31.0	9.1	36.0

Συνάρτηση CSS var().

var(): Εισάγει την τιμή μιας μεταβλητής CSS