cari

Rumah  >  Soal Jawab  >  teks badan

JavaScript membenarkan akses kepada sifat tersuai CSS (juga dikenali sebagai pembolehubah CSS)

Bagaimana untuk mendapatkan dan menetapkan sifat tersuai CSS (sifat diakses melalui var(…) dalam helaian gaya) menggunakan JavaScript (biasa atau jQuery)?

Ini adalah percubaan saya yang tidak berjaya: mengklik butang mengubah sifat font-weight 属性，但不会更改自定义 --mycolor biasa: 

<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>

P粉420868294P粉420868294430 hari yang lalu727

membalas semua(2)saya akan balas

  • P粉421119778

    P粉4211197782023-10-21 17:19:53

    Penyelesaian asli

    Cara standard untuk mendapatkan/menetapkan pembolehubah CSS3 ialah .setProperty() 和 .getPropertyValue().

    Jika pembolehubah anda ialah pembolehubah global (diisytiharkan dalam :root ), anda boleh menggunakan yang berikut untuk mendapatkan dan menetapkan nilainya. 

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

    Walau bagaimanapun, jika nilai var telah ditetapkan menggunakan .setProperty(), pengambil hanya akan mengembalikan nilai tersebut. Jika ditetapkan melalui pengisytiharan CSS, undefined akan dikembalikan. Lihat dalam contoh ini: 

    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>

    Untuk mengelakkan tingkah laku yang tidak dijangka ini, anda mesti memanggil kaedah .getPropertyValue() 之前使用 getCompulatedStyle(). Pengambil akan kelihatan seperti ini: 

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

    Pada pendapat saya, mengakses pembolehubah CSS sepatutnya lebih mudah, lebih pantas, intuitif dan semula jadi...

    Pendekatan peribadi saya

    Saya melaksanakan CSSGlobalVariables pembantu javascript kecil (<3kb) yang secara automatik mengesan semua global CSS aktif dalam dokumen dan membungkusnya ke dalam objek, <3kb) javascript 帮助程序，它自动检测文档中所有活动的 CSS 全局变量并将其打包到一个对象中， untuk akses dan manipulasi yang lebih mudah < /strong>.

    // 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 );

    Sebarang perubahan yang digunakan pada sifat objek ditukar secara automatik kepada pembolehubah CSS.

    Tersedia: https://github.com/colxi/ css-global variables

    balas
    0
  • P粉863295057

    P粉8632950572023-10-21 14:23:27

    Anda boleh menggunakan 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

    balas
    0
  • Batalbalas