Mengatur aturan pseudo-class CSS dari JavaScript

Saya mencari cara untuk mengubah aturan CSS untuk pemilih kelas semu (seperti: tautan,: hover, dll.) Dari JavaScript.

Jadi analog dari kode CSS: a:hover { color: red }di JS.

Saya tidak dapat menemukan jawabannya di tempat lain; jika ada yang tahu bahwa ini adalah sesuatu yang tidak didukung browser, itu akan menjadi hasil yang bermanfaat juga.

Anda tidak dapat mendesain kelas pseudo pada elemen tertentu saja, dengan cara yang sama Anda tidak dapat memiliki kelas pseudo dalam atribut inline style = "..." (karena tidak ada pemilih).

Anda bisa melakukannya dengan mengubah stylesheet, misalnya dengan menambahkan aturan:

#elid:hover { background: red; }

dengan asumsi setiap elemen yang ingin Anda pengaruhi memiliki ID unik untuk memungkinkannya dipilih.

Secara teori, dokumen yang Anda inginkan adalah http://www.w3.org/TR/DOM-Level-2-Style/Overview.html yang berarti Anda dapat (diberi stylesheet yang tertanam atau ditautkan sebelumnya) menggunakan sintaksis seperti:

document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);
document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';

IE, tentu saja, membutuhkan sintaksnya sendiri:

document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0);
document.styleSheets[0].rules[0].style.backgroundColor= 'red';

Browser lama dan kecil cenderung tidak mendukung sintaksis mana pun. Mengutak-atik gaya dinamis jarang dilakukan karena cukup menjengkelkan untuk mendapatkan yang benar, jarang dibutuhkan, dan secara historis merepotkan.

Saya mengumpulkan perpustakaan kecil untuk ini karena saya pikir ada kasus penggunaan yang valid untuk memanipulasi stylesheet di JS. Alasannya adalah:

• Mengatur gaya yang harus dihitung atau diambil - misalnya mengatur ukuran font pilihan pengguna dari cookie.
• Mengatur gaya perilaku (bukan estetika), terutama untuk pengembang widget / plugin UI. Tab, komidi putar, dll, sering memerlukan beberapa CSS dasar hanya untuk berfungsi - seharusnya tidak menuntut stylesheet untuk fungsi inti.
• Lebih baik daripada gaya sebaris karena aturan CSS berlaku untuk semua elemen saat ini dan masa depan, dan jangan mengacaukan HTML saat melihat di Firebug / Alat Pengembang.

Fungsi untuk mengatasi hal-hal lintas-browser:

addCssRule = function(/* string */ selector, /* string */ rule) {
  if (document.styleSheets) {
    if (!document.styleSheets.length) {
      var head = document.getElementsByTagName('head')[0];
      head.appendChild(bc.createEl('style'));
    }

    var i = document.styleSheets.length-1;
    var ss = document.styleSheets[i];

    var l=0;
    if (ss.cssRules) {
      l = ss.cssRules.length;
    } else if (ss.rules) {
      // IE
      l = ss.rules.length;
    }

    if (ss.insertRule) {
      ss.insertRule(selector + ' {' + rule + '}', l);
    } else if (ss.addRule) {
      // IE
      ss.addRule(selector, rule, l);
    }
  }
};

Cukup tempatkan css di string template.

const cssTemplateString = `.foo:[psuedoSelector]{prop: value}`;

Kemudian buat elemen gaya dan tempatkan string di tag gaya dan lampirkan ke dokumen.

const styleTag = document.createElement("style");
styleTag.innerHTML = cssTemplateString;
document.head.insertAdjacentElement('beforeend', styleTag);

Kekhususan akan mengurus sisanya. Kemudian Anda dapat menghapus dan menambahkan tag gaya secara dinamis. Ini adalah alternatif sederhana untuk pustaka dan mengacaukan array stylesheet di DOM. Selamat Coding!

Trik saya menggunakan pemilih atribut. Atribut lebih mudah diatur dengan javascript.

css

.class{ /*normal css... */}
.class[special]:after{ content: 'what you want'}

javascript

  function setSpecial(id){ document.getElementById(id).setAttribute('special', '1'); }

html

<element id='x' onclick="setSpecial(this.id)"> ...  

Ada alternatif lain. Alih-alih memanipulasi pseudo-class secara langsung, buat kelas nyata yang memodelkan hal yang sama, seperti kelas "melayang" atau kelas "dikunjungi". Tata kelas dengan gaya biasa "." sintaks dan kemudian Anda dapat menggunakan JavaScript untuk menambah atau menghapus kelas dari suatu elemen ketika acara yang sesuai kebakaran.

Alih-alih langsung mengatur aturan pseudo-class dengan javascript, Anda dapat mengatur aturan secara berbeda di file CSS yang berbeda, dan kemudian menggunakan Javascript untuk mematikan satu stylesheet dan mengaktifkan yang lain. Metode dijelaskan di A List Apart (qv. Untuk lebih detail).

Atur file CSS sebagai,

<link rel="stylesheet" href="always_on.css">
<link rel="stylesheet" title="usual" href="preferred.css"> <!-- on by default -->
<link rel="alternate stylesheet" title="strange" href="alternate.css"> <!-- off by default -->

Dan kemudian beralih di antara mereka menggunakan javascript:

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")<i>); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}

Seperti yang sudah dinyatakan ini bukan sesuatu yang didukung browser.

Jika Anda tidak membuat style secara dinamis (misalnya menariknya dari database atau sesuatu), Anda harus dapat mengatasinya dengan menambahkan kelas ke badan halaman.

Css akan terlihat seperti:

a:hover { background: red; }
.theme1 a:hover { background: blue; }

Dan javascript untuk mengubah ini adalah sesuatu seperti:

// Look up some good add/remove className code if you want to do this
// This is really simplified

document.body.className += " theme1";  

Mengganti stylesheet masuk dan keluar adalah cara untuk melakukannya. Berikut adalah perpustakaan untuk membuat stylesheet secara dinamis, sehingga Anda dapat mengatur gaya dengan cepat:

http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

Di jquery Anda dapat dengan mudah mengatur kelas pseudo hover.

$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});

di sini adalah solusi termasuk dua fungsi: addCSSclass menambahkan kelas css baru ke dokumen, dan toggleClass menyalakannya

Contoh menunjukkan menambahkan bilah gulir khusus ke div

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
  var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
  var add = (arguments.length > 2 ? newState : (elem.className.match(matchRegExp) === null));

  elem.className = elem.className.replace(matchRegExp, ''); // clear all
  if (add) elem.className += ' ' + theClass;
}

function addCSSclass(rules) {
  var style = document.createElement("style");
  style.appendChild(document.createTextNode("")); // WebKit hack :(
  document.head.appendChild(style);
  var sheet = style.sheet;

  rules.forEach((rule, index) => {
    try {
      if ("insertRule" in sheet) {
        sheet.insertRule(rule.selector + "{" + rule.rule + "}", index);
      } else if ("addRule" in sheet) {
        sheet.addRule(rule.selector, rule.rule, index);
      }
    } catch (e) {
      // firefox can break here          
    }
    
  })
}

let div = document.getElementById('mydiv');
addCSSclass([{
    selector: '.narrowScrollbar::-webkit-scrollbar',
    rule: 'width: 5px'
  },
  {
    selector: '.narrowScrollbar::-webkit-scrollbar-thumb',
    rule: 'background-color:#808080;border-radius:100px'
  }
]);
toggleClass(div, 'narrowScrollbar', true);

<div id="mydiv" style="height:300px;width:300px;border:solid;overflow-y:scroll">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a eros metus. Nunc dui felis, accumsan nec aliquam quis, fringilla quis tellus. Nulla cursus mauris nibh, at faucibus justo tincidunt eget. Sed sodales eget erat consectetur consectetur. Vivamus
  a diam volutpat, ullamcorper justo eu, dignissim ante. Aenean turpis tortor, fringilla quis efficitur eleifend, iaculis id quam. Quisque non turpis in lacus finibus auctor. Morbi ullamcorper felis ut nulla venenatis fringilla. Praesent imperdiet velit
  nec sodales sodales. Etiam eget dui sollicitudin, tempus tortor non, porta nibh. Quisque eu efficitur velit. Nulla facilisi. Sed varius a erat ac volutpat. Sed accumsan maximus feugiat. Mauris id malesuada dui. Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Sed a eros metus. Nunc dui felis, accumsan nec aliquam quis, fringilla quis tellus. Nulla cursus mauris nibh, at faucibus justo tincidunt eget. Sed sodales eget erat consectetur consectetur. Vivamus a diam volutpat, ullamcorper justo
  eu, dignissim ante. Aenean turpis tortor, fringilla quis efficitur eleifend, iaculis id quam. Quisque non turpis in lacus finibus auctor. Morbi ullamcorper felis ut nulla venenatis fringilla. Praesent imperdiet velit nec sodales sodales. Etiam eget
  dui sollicitudin, tempus tortor non, porta nibh. Quisque eu efficitur velit. Nulla facilisi. Sed varius a erat ac volutpat. Sed accumsan maximus feugiat. Mauris id malesuada dui.
</div>

Jika Anda menggunakan REACT, Ada sesuatu yang disebut radium . Ini sangat berguna di sini:

• Tambahkan penangan ke alat peraga jika gaya interaktif ditentukan, misalnya onMouseEnter untuk: melayang-layang, membungkus penangan yang ada jika perlu

• Jika salah satu penangan dipicu, misalnya dengan melayang, Radium memanggil setState untuk memperbarui bidang khusus-Radium pada objek keadaan komponen

• Saat dirender ulang, selesaikan gaya interaktif apa pun yang berlaku, misalnya: arahkan, dengan mencari kunci elemen atau ref dalam keadaan khusus Radium