Bu makale, JavaScript ile CSS ekleme yöntemlerini açıklayacaktır.
JavaScript ile CSS Nasıl Eklenir?
JavaScript'te, aşağıdaki yöntemleri veya yaklaşımları kullanarak stil özelliğini değiştirerek bir öğeye CSS stilleri ekleyebilirsiniz:
- style Satır içi stil olarak özellik
- satır içi stil olarak setAttribute() Yöntemi
- global bir stil olarak createElement() Yöntemi
Yöntem 1: 'style' Özelliğini Kullanarak JavaScript ile CSS Ekleme
JavaScript'e CSS eklemek için ' stil ' mülk. Bir öğenin satır içi stillerine erişmek ve bunları değiştirmek için kullanılır. Bir öğenin satır içi stillerini temsil eden bir nesne verir ve kişinin bireysel stil özelliklerini almasına veya ayarlamasına izin verir.
Sözdizimi
JavaScript'e CSS stili eklemek için, “ için aşağıdaki sözdizimi kullanılır. stil ' mülk:
eleman. stil ;
Burada, ' eleman ”, bir HTML öğesine yapılan bir başvurudur.
Örnek
Aşağıdaki örnekte, JavaScript kullanarak düğmelerin stilini belirleyeceğiz. İlk olarak, üç düğme oluşturacağız ve onlara stil vermek için düğme öğelerine erişmeye yardımcı olan id'ler atayacağız:
< düğme kimliği = 'btn2' > Reddetmek düğme >
< düğme kimliği = 'btn3' > Kabul etmek düğme >
Şekillendirmeden önce çıktı şöyle görünecektir:
Şimdi, bu düğmeleri JavaScript'te '' kullanarak biçimlendirelim. stil ' mülk. İlk olarak, “ yardımıyla atanmış kimliklerini kullanarak tüm düğme öğelerini alın. getElementById() ' yöntem:
kabul edelim = belge. getElementById ( 'btn1' ) ;reddetmesine izin ver = belge. getElementById ( 'btn2' ) ;
kabul edelim = belge. getElementById ( 'btn3' ) ;
Tüm bu düğmelerin arka plan renklerini “ stil ' mülk:
kabul etmek. stil . arka plan rengi = 'yeşil' ;reddetmek. stil . arka plan rengi = 'kırmızı' ;
kabul etmek. stil . arka plan rengi = 'sarı' ;
Gördüğünüz gibi, düğmelerin stili '' kullanılarak başarılı bir şekilde oluşturuldu. stil ' mülk:
Yöntem 2: “setAttribute()” Yöntemini Kullanarak JavaScript ile CSS Ekleme
JavaScript'te CSS stili eklemek için ' setAttribute() ' yöntem. Bir HTML öğesine bir öznitelik ve bunun değerini ayarlamak veya eklemek için kullanılır.
Sözdizimi
“ için aşağıdaki sözdizimi kullanılır. setAttribute() ' yöntem:
Örnek
Burada, “ kullanarak JavaScript'teki düğmelerdeki farklı stilleri ayarlayacağız. setAttribute() ' yöntem. Tüm düğmelerin sınır yarıçapını “ olarak ayarlayın. .5rem ”ve metin rengi “ Kabul etmek ' Ve ' Reddetmek ” düğmelerini “ beyaz ”.
reddetmek. setAttribute ( 'stil' , 'arka plan rengi: kırmızı; renk: beyaz; sınır yarıçapı: .5rem;' ) ;
kabul etmek. setAttribute ( 'stil' , 'arka plan rengi: sarı; kenarlık yarıçapı: .5rem;' ) ;
Çıktı
Yöntem 3: “createElement()” Yöntemini Kullanarak JavaScript ile CSS Ekleme
CSS stilinde olduğu gibi JavaScript stilinde sınıflar veya kimlikler oluşturmak istiyorsanız, ' öğe oluştur() ' yöntem. Dinamik olarak yeni bir öğe oluşturmak için kullanılır. Stil vermek için bir “ stil ” elemanı bu yöntemi kullanarak. “ createElement('stil') ” yöntemi, bir web sayfasına CSS stilleri eklemek için kullanılabilecek yeni bir stil öğesini dinamik olarak oluşturmak için kullanılır.
Sözdizimi
Verilen sözdizimi “ için kullanılır. öğe oluştur() ' yöntem:
JavaScript'e CSS stili eklemek için verilen sözdizimini kullanın:
sabit stil = belge. öğe oluştur ( 'stil' ) ;Ardından, aşağıdaki sözdizimini kullanarak stil öğesini head etiketine ekleyin:
belge. KAFA . eklemeChild ( stil ) ;Burada, ' stil ”, yeni oluşturulan stil öğesine bir referanstır ve “ belge.kafa ”, HTML belgesinin baş öğesidir.
Örnek
İlk olarak, “ kullanarak bir stil öğesi oluşturun. öğe oluştur() ' yöntem:
Şimdi, bir 'oluşturun btn ” aynı stili tüm butonlara ve kimliklere uygulamak için kullanılan sınıf” btn1 ”, “ btn2 ' Ve ' btn3 ” bireysel düğme stili için:
stil. içHTML = `. btn {
yazı tipi - boyut : 1.1rem ;
dolgu malzemesi : 3 piksel ;
marj : 2 piksel ;
yazı tipi - aile : olmadan - serif ;
sınır - yarıçap : .5rem ;
}
#btn1 {
arka plan - renk : yeşil ;
renk : beyaz ;
}
#btn2 {
arka plan - renk : kırmızı ;
renk : beyaz ;
}
#btn3 {
arka plan - renk : sarı ;
}
` ;
Şimdi, stil öğesini ' parametre olarak geçirerek belgenin başına ekleyin. eklemeChild() ' yöntem:
belge. KAFA . eklemeChild ( stil ) ; Çıktı
Hepsi JavaScript'e CSS eklemekle ilgili.
Çözüm
JavaScript ile CSS eklemek için, ' dahil olmak üzere satır içi stili kullanın. stil ” Mülkiyet ve “ setAttribute() ” yöntemi veya “ kullanarak global stil öğe oluştur() ' yöntem. Uygulama stillerini korumayı zorlaştırdığı ve kod tekrarına yol açabileceği için satır içi bir yöntem önerilmezken genel stil daha verimlidir. Bu makalede, JavaScript ile CSS ekleme yöntemleri açıklanmıştır.