Pertanyaan Mengubah gaya pseudo-elemen CSS melalui JavaScript


Apakah mungkin untuk mengubah gaya pseudo-elemen CSS melalui JavaScript?

Sebagai contoh, saya ingin secara dinamis mengatur warna scrollbar seperti ini:

document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");

dan saya juga ingin memberi tahu scrollbar untuk bersembunyi seperti ini:

document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";

Kedua skrip ini, bagaimanapun, mengembalikan:

Uncaught TypeError: Tidak dapat membaca 'gaya' properti dari nol

Apakah ada cara lain untuk melakukan ini?
Cross-browser interoperability tidak penting, saya hanya membutuhkannya untuk bekerja di browser webkit.


32
2017-12-19 03:41


asal


Jawaban:


EDIT: Di sana aku s secara teknis cara langsung mengubah gaya pseudo-elemen CSS melalui JavaScript, as jawaban ini menjelaskan, tetapi metode yang disediakan di sini lebih baik.

Yang paling dekat dengan mengubah gaya elemen-pseudo di JavaScript adalah menambahkan dan menghapus kelas, kemudian menggunakan elemen semu dengan kelas-kelas itu. Contoh untuk menyembunyikan bilah gulir:

CSS

.hidden-scrollbar::-webkit-scrollbar {
   visibility: hidden;
}

JavaScript

document.getElementById("editor").classList.add('hidden-scrollbar');

Untuk kemudian menghapus kelas yang sama, Anda bisa menggunakan:

document.getElementById("editor").classList.remove('hidden-scrollbar');

19
2017-08-31 00:47



Untuk mengedit yang sudah ada yang Anda tidak memiliki referensi langsung untuk mengharuskan iterasi semua lembar gaya pada halaman dan kemudian iterasi semua aturan di masing-masing dan kemudian string yang cocok dengan pemilih.

Berikut adalah referensi ke metode yang saya posting untuk menambahkan CSS baru untuk pseudo-elements, versi mudah di mana Anda menyetel dari js

Javascript mengatur CSS: setelah gaya

var addRule = (function (style) {
    var sheet = document.head.appendChild(style).sheet;
    return function (selector, css) {
        var propText = typeof css === "string" ? css : Object.keys(css).map(function (p) {
            return p + ":" + (p === "content" ? "'" + css[p] + "'" : css[p]);
        }).join(";");
        sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
    };
})(document.createElement("style"));

addRule("p:before", {
    display: "block",
    width: "100px",
    height: "100px",
    background: "red",
    "border-radius": "50%",
    content: "''"
});

sheet.insertRule mengembalikan indeks aturan baru yang dapat Anda gunakan untuk mendapatkan referensi untuk itu yang dapat digunakan nanti untuk mengeditnya.


12
2017-11-08 13:55



Anda tidak dapat menerapkan gaya ke psuedo-elemen dalam JavaScript.

Anda bisa, bagaimanapun, menambahkan <style> tag ke kepala dokumen Anda (atau memiliki tempat tinggal <style id='mystyles'> dan mengubah isinya), yang menyesuaikan gaya. (Ini akan bekerja lebih baik daripada memuat di stylesheet lain, karena tertanam <style> tag memiliki prioritas lebih tinggi daripada <link>Yang pertama, pastikan Anda tidak mengalami masalah.

Alternatifnya, Anda bisa menggunakan nama kelas yang berbeda dan menetapkannya dengan gaya psuedo-elemen yang berbeda di stylesheet asli.


4
2017-11-08 05:44



Saya memposting pertanyaan yang mirip, tetapi tidak sepenuhnya seperti, pertanyaan ini.

Saya menemukan cara untuk mengambil dan mengubah gaya untuk elemen pseudo dan bertanya apa yang dipikirkan orang tentang metode tersebut.

Pertanyaan saya ada di Mengambil atau mengubah aturan css untuk elemen pseudo

Pada dasarnya, Anda bisa mendapatkan gaya melalui pernyataan seperti:

document.styleSheets[0].cssRules[0].style.backgroundColor

Dan ubah satu dengan:

document.styleSheets [0] .cssRules [0] .style.backgroundColor = newColor;

Anda, tentu saja, harus mengubah indeks stylesheet dan cssRules. Baca pertanyaan saya dan komentar-komentar yang dilontarkannya.

Saya telah menemukan ini berfungsi untuk elemen pseudo serta elemen / gaya "biasa".


3
2017-10-07 23:57



Jika Anda merasa nyaman dengan beberapa degradasi yang anggun di browser yang lebih lama, Anda dapat menggunakan CSS Vars. Jelas cara termudah dari metode yang pernah saya lihat di sini dan di tempat lain.

Jadi dalam CSS Anda, Anda dapat menulis:

#editor {
  --scrollbar-background: #ccc;
}

#editor::-webkit-scrollbar-thumb:vertical {
  /* Fallback */
  background-color: #ccc;
  /* Dynamic value */
  background-color: var(--scrollbar-background);
}

Kemudian di JS Anda, Anda dapat memanipulasi nilai tersebut pada elemen #editor:

document.getElementById("#editor").style.setProperty('--scrollbar-background', localStorage.getItem("Color"));

Banyak contoh lain dari memanipulasi var CSS dengan JS di sini: https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/


2
2018-04-18 20:29



Sepertinya querySelector tidak akan berfungsi dengan pseudo-class / pseudo-elements, setidaknya bukan itu. Satu-satunya hal yang dapat saya pikirkan adalah secara dinamis menambahkan stylesheet (atau mengubah yang sudah ada) untuk melakukan apa yang Anda butuhkan.

Banyak contoh bagus di sini: Bagaimana cara memuat aturan css secara dinamis di Webkit (Safari / Chrome)?


0
2017-12-19 04:07