Çözüldü Bir CSS'yi sadece JavaScript'teki bir if kondisyonunda uygulayabilmek

Stereo.Luigi99 · 6 Kasım 2023

İnternette araştırdığımda bulamadım, o yüzden buraya soruyorum.

Technopat Sosyal için bir eklenti yapıyorum ve bir durumla karşılaştım.
CSS ile aşağıdaki kodlarla bir şeyleri değiştiriyorum fakat sadece bir if kondisyonunda aktif olmasını istiyorum. Yoksa Dimension temasında çok iyi gözükürken varsayılanlarda çok kötü gözüküyor.

Örnek:

JavaScript:

if ((data_style_id == "34") || (data_style_id == "36")) // Dimension Temasını Algılama
    {
        console.log("Şu anda Dimension kullanıyorsun.");
        // CSS kodları
    }
else // Varsayılan/Karanlık Tema
    {
        console.log("Şu anda Varsayılan veya Karanlık Tema kullanıyorsun.");
        // Yukarıdaki CSS kodları kısmı buraya etki etmemeli.
    }

Kısaca CSS kodlarımın sadece belli bir durumda aktif olmasını istiyorum.
Buna benzer bir şey mümkün mü? Mümkünse nasıl bir yol izlemem gerek?
CSS kodlarımı aşağıya bırakıyorum.

CSS:

html[dir='ltr'] .p-nav-scroller .hScroller-action.hScroller-action--end, html[dir='rtl'] .p-nav-scroller .hScroller-action.hScroller-action--start {
    background-image: linear-gradient(to right, rgb(0 0 0 / 0%) 0%, #00000000 60%) !important;
}

html[dir='ltr'] .p-nav-scroller .hScroller-action.hScroller-action--start, html[dir='rtl'] .p-nav-scroller .hScroller-action.hScroller-action--end {
    background-image: linear-gradient(to left, rgba(0,0,0,0) 0%, #00000000 60%) !important;
}

.p-nav-scroller .hScroller-action {
    color: #949494 !important;
}

.p-nav-scroller .hScroller-action::after {
    background: rgb(255 255 255) !important;
}

.p-nav-scroller .hScroller-action:hover {
    color: #949494 !important;
}

@Nizel G

RaSGooL · 7 Kasım 2023

En kolayı yolu body veya html tagına class veya attribute eklemen. Sonra yazacağın css kodlarını buna göre düzeltmen gerekiyor.
Mesela body class'ına "stereo-theme" adında bir class ekle. Sonrasında;

CSS:

.stereo-theme .blabla {
    /*bla bla*/
}

Temanın ne olduğunu zaten js tarafında yazmışsın. element.classlist add veya remove kullanarak body deki class'ı silmen yeterli.

Element: classList property - Web APIs | MDN

The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.

developer.mozilla.org

533388 · 6 Kasım 2023

@Stereo.Luigi99 classlar atıyabilirsiniz.

Nizel G · 6 Kasım 2023

Stereo.Luigi99 dedi:
Kısaca CSS kodlarımın sadece belli bir durumda aktif olmasını istiyorum.
Buna benzer bir şey mümkün mü? Mümkünse nasıl bir yol izlemem gerek?

Mümkün değil. Sunucu taraflı Scss gibi bir şey olması lazım. Kullanmadım etmedim o yüzden bilgim yok o konuda.

CSS kodunu var olan sınıf üzerinden değil kendi sınıfını oluştur. Şöyle:

CSS:

.stereo-class-1 {
  width: 100px;
}

Daha sonra Javascript'inde de var olan objeye kendi sınıfını ekleyeceksin.

JavaScript:

eleman.classList.remove('stereo-class-1');

Bunu dökümanın hazır olması olayına başlayabilirsin veya Vavien'den gördüğün gibi oluşmasını bekleyebilirsin.

Ek olarak, açılan konulara etiketlenmeyi sevmiyorum. Bilgine.

TheAny · 7 Kasım 2023

Nizel G dedi:
Mümkün değil. Sunucu taraflı Scss gibi bir şey olması lazım. Kullanmadım etmedim o yüzden bilgim yok o konuda.

CSS kodunu var olan sınıf üzerinden değil kendi sınıfını oluştur. Şöyle:

CSS:

.stereo-class-1 { width: 100px; }

Daha sonra Javascript'inde de var olan objeye kendi sınıfını ekleyeceksin.

JavaScript:

eleman.classList.remove('stereo-class-1');

Bunu dökümanın hazır olması olayına başlayabilirsin veya Vavien'den gördüğün gibi oluşmasını bekleyebilirsin.

Ek olarak, açılan konulara etiketlenmeyi sevmiyorum. Bilgine.

Mümkün, niye mümkün olmasın. JS ile sayfa yüklendikten sonra bile sayfanın içeriğini manipüle edersin. SCSS kullanmadan karanlık veya aydınlık teması yapabiliyorsun. Belirli bir durumda aktif hale geliyor. Tek yapması gereken jQuery kullanıp doğru querylerle manipüle etmek. CSS kodunu da ayrı bir dosyada kullanmak yerine JS'te yazarsa daha rahat yapar.

RaSGooL · 7 Kasım 2023

En kolayı yolu body veya html tagına class veya attribute eklemen. Sonra yazacağın css kodlarını buna göre düzeltmen gerekiyor.
Mesela body class'ına "stereo-theme" adında bir class ekle. Sonrasında;

CSS:

.stereo-theme .blabla {
    /*bla bla*/
}

Temanın ne olduğunu zaten js tarafında yazmışsın. element.classlist add veya remove kullanarak body deki class'ı silmen yeterli.

Element: classList property - Web APIs | MDN

The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.

developer.mozilla.org

pottie4r · 7 Kasım 2023

xenForo’nun plugin dosyalarinda aktif temayi cekme gibi seylerin olmasi lazimdi. Zaten bu tip yuklemeler sunucu tarafli yapilmali bence. DOM yuklendikten sonra manipule etmek WebApp degilse hos degil.

Stereo.Luigi99 · 7 Kasım 2023

Hepinizin benden daha iyi çözüm önerileri olduğunu düşünmeme rağmen
kendime başka türlü bir çözüm buldum. Kodlardan acemilik akıyor fakat bende çalıştı.

Bu StackOverflow sorusundan yola çıkarak yaptım.

How do you add CSS with Javascript?

How do you add CSS rules (eg strong { color: red }) by use of Javascript?

stackoverflow.com

JavaScript:

if ((data_style_id == "34") || (data_style_id == "36")) // Dimension Temasını Algılama
    {
        console.log("Şu anda Dimension kullanıyorsun.");
   
        cssKodlari = // CSS kodlarını bu değişkene koydum.
        `// Sadece Dimension temasında uygulanacak CSS kodları
        `;
   
        var cssKodElementi = document.createElement("style"); // Style elementi oluşturdum.
        cssKodElementi.innerText = cssKodlari; // Elementin içine CSS kodlarını ekledim.
        document.head.appendChild(cssKodElementi); // Head türünün içine elementimi ekledim.
    }
else // Varsayılan/Karanlık Tema
    {
        console.log("Şu anda Varsayılan veya Karanlık Tema kullanıyorsun.");
        // Yukarıdaki CSS kodları kısmı buraya etki etmiyor.
    }

bitwise · 8 Kasım 2023

Boyle bir sey degil mi yapmak istedigin?

JavaScript:

if (condition) {
  document.getElementById('id').classList.add('istenen-class');
  document.getElementById('id').classList.remove('istenmeyen-class');
}

Stereo.Luigi99 · 8 Kasım 2023

@bitwise Evet fakat elementi bulmaya çalışırken hep undefined bulduğundan dolayı sorun oldu.
Ekleyeceğim sınıflar st-Scroller-action--start, stScroller-action--end ve stScroller-action.

CSS:

.stScroller-action--start {
    background-image: linear-gradient(to right, rgb(0 0 0 / 0%) 0%, #00000000 60%) !important;
}

.stScroller-action--end {
    background-image: linear-gradient(to left, rgba(0,0,0,0) 0%, #00000000 60%) !important;
}

.stScroller-action {
    color: #949494 !important;
}

.stScroller-action::after {
    background: rgb(255 255 255) !important;
}

.stScroller-action:hover {
    color: #949494 !important;
}

Düzenleme: Elementleri bulup classList.add ile kendi sınıflarımı ekledim.
classList.remove yapınca tamamen kayboluyorlardı.

Çözüldü Bir CSS'yi sadece JavaScript'teki bir if kondisyonunda uygulayabilmek

Ayrıntılı düzenleme

Stereo.Luigi99

Hectopat

RaSGooL

Element: classList property - Web APIs | MDN

533388

Hectopat

Nizel G

Megapat

TheAny

Gigapat

RaSGooL

Kilopat

Element: classList property - Web APIs | MDN

pottie4r

Megapat

Stereo.Luigi99

Hectopat

How do you add CSS with Javascript?

bitwise

Gigapat

Stereo.Luigi99

Hectopat

Benzer konular